Boost Your Web Debugging Skills with Local Overrides in Chrome DevTools

Edit APIs and web content instantly with Chrome DevTools, with no backend changes needed!

Good news for backend and frontend developers! Frontend developers no longer need to wait for backend changes to APIs. With the new DevTools override feature, you’re in control!😎

💡The Problem Statement

While working on a project involving APIs, front-end developers often have to wait for back-end developers to provide the necessary APIs. If the backend developer forgets to include a specific field in the response, the frontend developer must wait for them to make the changes. However, with the amazing DevTools override feature, you can now directly modify web content and HTTP response headers locally, eliminating the wait and boosting productivity!

✅ Advantages

1. With local overrides, you no longer need to wait for backend changes. You can mock requests locally and start working immediately, without worrying about backend access.

2. You can keep track of all the changes you make to web content in one place.

3. Mock API and test response before going to production.

4. You can prototype a new UI design if you know what the backend structure is already.

Set up local overrides

You can override web content or response headers right away in the Network tab:

Step 1:

Open Devtools, Navigate to the Network panel, right click on any request and you will see options to Override headers, Override content and show all overrides.

Step 2:

Choose Override headers or Override content from the drop-down menu.

Step 3:

If you have not setup local overrides, Devtools prompt you to Select a folder to store the override files in.

Step 4:

1. Once local overrides are set up and enabled, depending on what you are about to override, DevTools takes you to:

• The Sources panel lets you make changes to web content.

• The editor in Network > Headers > Response Headers lets you make changes to response headers.

Step 5:

DevTools saves the modified files, lists them in Sources > Overrides, and displays an icon next to the overridden files (indicating which request has been overridden) in the relevant panels and panes: Elements > Styles, Network, and Sources > Overrides.

Step 6:

To view the Override changes just ⟳Refresh the page and observe your changes applied!
As you can see in the Network tab, the request with the purple dot are the request that we have changed locally.

Step 7:

To temporarily disable local overrides or delete all the override files, navigate to Sources > Overrides and clear the ☐ , Enable Local Overrides checkbox, or click block Clear 🚫 respectively.

Mocking the API response directly in the Network tab is incredibly useful when the backend response or headers are missing something. However, always recheck the flow once the backend changes are implemented to avoid potential issues in production.