Skip to main content

Override Response Headers in Chrome DevTools

· 5 min read
Daniel Caldas
Daniel Caldas
Co-founder

Modern browsers have advanced development toolkits allowing HTTP request inspection in detail. With the recent Chrome 111 release users are now able to override response headers directly in the network panel. This means tools like browser extension are not needed to accomplish simple use cases. This article is a step-by-step how-to for that DevTools override: how to add or edit a response header from the Network panel, and where the feature stops.

Motivation​

HTTP headers let the client and the server pass additional information with an HTTP request or response. This meta-information is important for a website’s functionality and security. Until now, editing HTTP headers required having access to the actual web server, which often made it difficult to quickly experiment with changes to HTTP headers.

[source: ChromeDevTools/rfcs]

Overriding a response header is a developer need that is tipically related with the following use cases:

  1. Debugging and troubleshooting: modifying response headers helps developers debug and troubleshoot issues by simulating different server behaviors.
  2. API testing and development: developers can test and handle various API responses by modifying response headers in the browser.
  3. Caching and performance optimization: modifying response headers allows developers to experiment with caching configurations and optimize frontend performance.
  4. Security: response header modification helps verify security measures and test authentication mechanisms.
  5. API versioning and compatibility: developers can ensure API compatibility by modifying headers and testing different API versions.

The most common case of all is CORS: a response missing Access-Control-Allow-Origin that the page is not allowed to read. How to Fix CORS Errors in Your Browser explains each CORS error message and how to unblock it while you develop.

How​

The Chrome team made it very simple this time. Here's how you can add or modify response headers:

  1. Open the devtools panel in the Network tab.
  2. Locate and open the request you wish to modify the response headers.
  3. Locate the Response Headers in the Headers panel.
  4. You'll see that the UI looks a little bit different from usual:
    1. You can click + Add header to add a new response header.
    2. You can edit existing reponse header values.

example override response header

Once you trigger the same request again your modifications are applied to the response header(s) as you can see in the highlighted sections in the screenshot above.

That's it!

Limitations​

For simple modifications the Chrome Network Panel has you covered. However if you find yourself bumping into these limitations:

  1. You need to easily restore overrides without having to manage chrome override files.
  2. You need to also modify request headers in a similar fashion.
  3. You need to programatically change headers (say with custom JavaScript code?).

You came to the right place, please read on!

Chrome DevTools vs tweak​

Chrome DevTools overridestweak
Override response headersYesYes
Modify request headersNoYes
What you can do to a headerAdd a header or edit its valueSet, Append or Remove
Match many URLs with one overrideWildcards in a .headers fileUrl expression or regular expression per rule
Works with DevTools closedNoYes
SetupPick a local folder for overrides and grant DevTools accessInstall the extension, create a rule
Turn an override offEdit or delete the override filesToggle the rule, or stop tweak
Apply to every tabNo, only the inspected tabYes, with the Global scope
Change headers with your own codeNoYes, with request hooks
One-click CORS, cache and CSP fixesNoYes, with templates
BrowsersChrome and other Chromium browsersChrome, Edge and Firefox
PriceFreeHeader rules are free on every plan

If a single response header on one request is all you need, DevTools is enough. Once you need request headers, several rules at once, or overrides that survive closing DevTools, a headers only rule does the job.

Beyond browser developer tools​

Altough Chrome will cover most of your basic needs, if you're hitting on the above limitations, you can try tweak whenever you're ready.

Modify request headers​

With an intuitive table like interface you modify both request and response headers.

Programatically modify request headers​

With request hooks you can write your own custom script that modifies the specificied headers only when the request meets some criteria; for example when the URL or request body have specific keywords or content.



If you liked this article, consider sharing (tweeting) it to your followers.


Did you like this article?

Need something else? Request a feature