Master API Overrides in Chrome DevTools

Introduction

Have you ever faced a situation as a frontend developer where you needed to show a demo to your product manager, and something was broken in the API response? Or, a production bug where you were blocked by waiting on your backend team to provide you with a fix to implement further on the frontend?

It happens, right? Going back to the backend team and getting a quick fix for these issues would be ideal, but may not be realistic in most cases. It depends on the availability of the backend developers, the priority items they’re working on, communication protocols between teams, and even interpersonal relationships.

Now, the question is, can you afford to wait? Wait for things to work in your favour within the given deadline so that you can show that demo or deliver the work to your customer? The answer is NO. You may not have that luxury.

Problem 1: The Backend Response Is Wrong

Here is a classic case of a wrong API response, but you still need to continue with your frontend work. Take a look at the image below. Do you see that something is off? Yeah, on the first card, the spelling of Banana seems to be misspelled as Banananana. This user interface is constructed using the data we have received as an API response.

How to Use Content Overriding

1. Open Chrome DevTools (F12 or Cmd+F12 on Mac).
2. Navigate to the Network tab and inspect the API request.
3. Right-click the request and select Override content.
4. Choose a folder to store overrides (e.g., debug_devtools).
5. Edit the response file (e.g., edibles) and save changes.
6. Refresh the browser to see updates.

Problem 2: Validating a UI Scenario Without Backend Changes

Imagine you need to validate that certain items are low in stock on an item listing page. If the stock quantity of an item hits 50 or below, you want to show a Low Stock label for that item.

Steps to Simulate Low Stock

• Edit the API response to set quantity to 50.
• Save the file and refresh the browser.
• Verify the Low Stock label appears automatically.

Problem 3: Handling CORS Errors

CORS errors block frontend development when APIs and web apps are on different domains. Chrome DevTools allows you to bypass these errors temporarily.

Workaround for CORS

1. Use the Overrides feature to simulate allowed headers.
2. Edit the Access-Control-Allow-Origin header in the override file.
3. Test the application locally without backend changes.

Additional Tips

• Store overrides in a dedicated folder for easy reuse.
• Share override files with team members for consistent testing.
• Disable overrides when no longer needed to avoid conflicts.

Conclusion

Chrome DevTools’ override feature is a game-changer for frontend developers. By simulating API responses, validating UI scenarios, and bypassing CORS errors, you can stay productive even when backend systems lag. Start using these techniques today to streamline your workflow and deliver results faster.

Call to Action: Watch the full video tutorial on the Thinking in Debugging series for hands-on guidance.