Override files and HTTP response headers locally

With local overrides, you can keep the changes you make in DevTools across page loads. You can also override HTTP response headers.

How it works:

• When you make changes in DevTools, DevTools saves a copy of the modified file to a folder you specify.
• When you reload the page, DevTools serves the local, modified file, rather than the network resource.

# Limitations

Local overrides work for network response headers and for most file types, with a couple of exceptions:

• DevTools doesn't save changes made in the DOM tree of the Elements panel.
• If you edit CSS in the Styles pane, and the source of that CSS is an HTML file, DevTools won't save the change.

Instead, you can edit HTML files in the Sources panel.

# Enable or disable local overrides

Specify a folder where DevTools will keep your changes:

1. Open DevTools on a page.

2. Go to Sources > Overrides and click Select folder for overrides.

   

3. Pick a folder and, when prompted, allow DevTools access to it.

To view the files served by the server again, clear Enable local overrides at any time.

To delete all the files with changes, click .

# Make changes

Make changes to your code, for example, edit CSS in the Elements panel, or JavaScript in Sources.

DevTools saves the modified files, lists them in Sources > Overrides, and shows you the icon next to the overridden files.

# Track your local changes

You can keep track of all the changes you make in one place—the Changes drawer tab.

# Override HTTP response headers

From the Network panel, you can override HTTP response headers without the access to the web server.

With response header overrides, you can locally prototype fixes for various headers, including but not limited to:

• Cross-Origin Resource Sharing (CORS) Headers
• Permissions-Policy Headers
• Cross-Origin Isolation Headers

To override a response header:

1. Open DevTools, for example, on this demo page.

2. Go to Network, select a request from the table, open Headers > Response Headers.

3. Hover over a response header value and click .

   

4. If prompted, pick a folder for DevTools to save changes to and allow access.

5. Modify a header.

   This example adds the Access-Control-Allow-Origin: * header to get rid of a CORS error.

   
   • To edit a header value, click it.
   • To add a new header, click Add header.
   • To remove a header override, click next to it. This removes the headers you added or reverts modified values back to original values.

   DevTools highlights modified headers in green and removed overrides in red.

6. Refresh the page to apply the changes.

# Edit all response header overrides

To edit all header overrides in one place:

1. Click Header overrides next to the Response Headers section.

   

   DevTools takes you to the corresponding .headers file in Sources > Overrides.

2. Edit the .headers file:

   

   • To add a new override rule, click Add override rule. A rule here is a set of headers and values and a single or multiple request to apply them to.

     You can use wildcards to specify multiple requests at once. Designate multiple characters with * and a single one with ?.

   • To add a header-value pair to a rule, hover over another pair and click .

   • To revert a header value, remove an added header or a rule, hover over it and click .

3. Save the .headers file with Command / Control + S.

4. Refresh the page to apply the changes.