How to Override API Responses and Headers in Chrome DevTools: A Step-by-Step Guide

Have you ever encountered a situation as a front-end developer where you need to show a demo to your product manager, and something breaks in the API response? Or, a production bug where you were blocked waiting for your backend team to provide you with a fix to implement further on the frontend.

To make things even worse, how about a CORS error that prevented you from displaying the page altogether?

It happens, right? Going back to the back-end team and getting these issues resolved quickly would be ideal, but may not be realistic in most cases. This depends on the availability of backend developers, the priority items they are working on, the communication protocols between teams, and even interpersonal relationships.

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

Today, in this article, you will learn some mind-blowing tips and tricks that will save you from these situations. You’ll understand how to set up your Chrome browser so you can continue your front-end development even when the back-end API returns an invalid response or a CORS error.

This is a step-by-step guide that will help you get comfortable with all the required configurations and set it up for use on your web projects. This guide is also available as part of a video tutorial. Thinking in Debugging If you like the series, you can check it out:

Let’s start with the problems and their solutions.

Table of Contents

1. Problem 1: The backend response is incorrect.

2. Problem 2: Validating the UI scenario without backend changes

3. Problem 3: Handling CORS errors

4. Additional tips

5. Learn more from Thinking in a Debugging Mindset.

6. Before we end…

Problem 1: The backend response is incorrect.

Here’s a classic case of bad API response, but you still need to continue your frontend work.

Take a look at the image below. Do you see something off? Yes, on the first card, spelled out Banana It looks like it was spelled wrong. Banananana. This user interface is built using the data we received as a response to the API.

We can go to the backend team and request them to fix it as soon as possible. But that may not happen until the next sprint starts, which could be 15 days from now.

So, what can we do to continue our work and continue all the validations on the front-end side? We can use Content Overriding Chrome browser feature to alleviate this situation.

How to use Content Overriding

First, open your Chrome browser’s DevTools by pressing F12 (on Mac, Cmd+F12). Then go to the Network tab and inspect the API request that returns the wrong response.

Next, right-click on the API request and select Override content option from the context menu.

You may wonder what the content here means, and what am I doing? You are overriding the API response so that it can reflect the UI natively.

This will bring up a UI at the top where you can select a folder to store the override files. It is important to understand that all content overrides are stored locally on your machine’s hard disk. This means you can use these permanent overrides over and over again until someone permanently fixes the issue on the backend.

Click on Now. Select folder Button

This will open the folder explorer for you. Create a new folder and select it, or select an existing folder where you want to save the overrides. In my case, I named the folder. debug_devtools.

Now, Chrome DevTools will ask to confirm that you are allowing DevTools to modify files on your local system. Click on the bus. Allow Button

That’s all for setup. Now, you will get the same answer under editable mode. Sources DevTools tab. Let’s take a closer look at the image below:

1. are listed under Local Overrides. Sources > Oveerides DevTools tab.

2. on the left, Enable Local Overrides check box is selected, and the overrides are listed below. You can find the same folder you created earlier, and below that, you’ll see another folder called localhost:3001 And a file called edibles Under this the localhost:3001 folder is named relative to the API endpoint namespace we are connecting to. Below that, the name of the edibles file goes with the name of the application.

3. On the right side, you can see the content (i.e. the response to the food request) in editable mode.

You can even cross-check the file system now. debug_devtools Folders You should find the same folders and files as you saw in DevTools.

You can open edibles File The contents of the file should match exactly the answer you saw earlier.

Now, it’s time to override. By visiting the Editable Answers panel of the Sources tab, you can correct the spelling. Save your changes using Ctrl + S (or Cmd + S).

Now, forcefully refresh your browser. You should be able to see your change reflected on the UI.

Fantastic!! You can now share this overridden answer ( edibles file) with other developers pointing to their Chrome DevTools to get the same local fix until the backend fixes it.

Problem 2: Validating the UI scenario without backend changes

Imagine you need to verify that some items on an item listing page are out of stock. If the stock quantity of an item drops to 50 or less, you want to display a Low Stock Label this item.

Now, what if the API response doesn’t return a quantity of 50 or less? Content overriding can be avoided once again!

You can edit the response to set the quantity value to 50 or less and follow the same process as before to reflect the change in the UI. See the image below:

1. We have modified the quantity on the right side panel.

2. Once saved and refreshed, we not only see the updated count on the UI, but also execute the underlying JavaScript logic to display it. Low Stock Label automatically. It’s a superpower.

Problem 3: Handling CORS errors

Cross-Origin Resource Sharing (CORS) A browser security feature that allows a web server to explicitly grant requests from a domain other than its own. By default, browsers do not allow these cross-origin requests and follow a strict rule called Same Origin Resource Sharing.

In many cases, your API server and web server may be hosted on different domains. In these cases, when the web application tries to access an API, it encounters a CORS error.

On the server side, you need explicit configurations to allow cross-origin requests. For example, you need to add the following response header:

Access-Control-Allow-Origin: 
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: *

So, again, it cannot be guaranteed that your CORS error will be resolved by the server as quickly as possible. But you can’t afford to be blocked because of it. So, what is the way? Yes! Overriding, but this time, overriding the response header.

Go to the Network tab of Chrome Dev Tools and right-click on the application that has the CORS error. Now, select Override headers option from the context menu.

By the way, have you noticed that Override content Option disabled here? This is because we don’t have a response as content for this request, because there is an error.

Clicking on Overriding headers will take you Headers tab where you can find the option to add additional headers to the response headers. Click on + Add header Button to add CORS-related headers.

Add the three headers one by one with their respective values:

Access-Control-Allow-Origin:  
Access-Control-Allow-Methods: GET 
Access-Control-Allow-Headers: *

Each of these headers has its own important use:

1. with the Access-Control-Allow-Origin header, you can specify the origin domains that the server is allowed to make cross-origin requests to. In this case, the value is Where we are running ReactJS app based on Vite.

2. Header Access-Control-Allow-Methods Specifies what types of HTTP methods are allowed from the originating domain. In this case, we’re just giving permission. GET method

3. gave Access-Control-Allow-Headers HTTP response headers specify which HTTP headers can be safely used during a cross-origin request.

Well, let’s add them all and save.

Like overriding content, overriding headers will also create a folder with the context of the server domain, and below that, a file called .headers. As the file name starts with a dot (.), it can be treated as a hidden file by most operating systems. So make sure you go through OS settings to view hidden files to view this file.

Once you view and open the file, you’ll see the headers you added with the overriding.

Now, hard refresh your browser, and try to perform the same operation that was giving you the CORS error earlier. Wow, the error is now gone! You should be able to see the success of the request and the response returned from the server.

Just imagine, not a single line of server-side code changes, and you’re unblocked so you can get on with your client-side UI work. Fantastic, isn’t it?

Additional tips

Before we finish, let’s learn about some more useful tips.

Applying Overrides Globally

We implemented CORS error header overriding only. /user API endpoint. What if you need to implement the same overriding for other endpoints? You can easily do it by following these simple steps.

1. Visit the Sources Tab

2. select Overrides Sub-tab

3. Click on .headers Override

4. On the right-hand panel, change the value of Apply to To *.

That’s it. Now, the same response headers will be applied as an override for all endpoints.

Disabling or removing overrides

Sometimes, you want to disable or remove overrides. To disable overrides without removing them, simply uncheck them. Enable Local Overrides To permanently remove all check box overrides, click the stop icon in the top right corner. Also, to selectively remove an override, right-click on it and select Delete.

Learn more from Thinking in a Debugging Mindset.

If you liked this practical, example-based guide, you’ll enjoy my other content on debugging. Thinking in Debugging Series please Check it out.

Before we end…

That’s it! I hope you found this insightful.

Let’s get in touch:

See you soon with my next article. Until then, please take care and keep learning.