Override web content and HTTP response headers locally

Sofia Emelianova
Sofia Emelianova
GitHub

With local overrides, you can unblock your workflow by prototyping and testing changes and fixes without waiting for the backend, third-parties, or APIs to support them.

Use local overrides to mock remote resources even if you don't have access to them. You can mock responses to requests and various files, for example, HTTP response headers and web content, including XHR and fetch requests.

For example, local overrides can help in the following use cases:

  • Mock API and test API fixes before they actually go to production.
  • Prototype new UI designs if you already know data structures the backend is going to use.
  • Test performance fixes, for example, eliminate CLS, to make sure in advance that they are significant.

Local overrides also lets you keep the changes you make in DevTools across page loads.

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.

You can also save your changes directly to source files. See Edit and save files with Workspaces.

Limitations

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

  • Cache is disabled when Local overrides are enabled.
  • 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.

Set up local overrides

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

  1. Open DevTools, navigate to the Network panel, right-click a request you want to override, choose Override headers or Override content from the drop-down menu. Choosing override content from the right-click menu of a request.
  2. If you haven't set up local overrides yet, in the action bar at the top, DevTools prompts you to:
    1. Select a folder to store the override files in. DevTools prompts you to select a folder.
    2. Click Allow to grant DevTools access rights to it. DevTools requests access.
  3. If you have local overrides set up but disabled, DevTools automatically enables them.

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

    • The Sources panel to let you make changes to web content.
    • The editor in Network > Headers > Response Headers to let you make changes to response headers.

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

To delete a single override file or all overrides in a folder, right-click the file or folder in Sources > Overrides, select Delete, then click OK in the dialog. This action can't be undone and you will have to manually recreate the deleted overrides.

To quickly see all overrides, in the Network panel, right-click a request and select Show all overrides. DevTools will take you to Sources > Overrides.

Override web content

To override web content:

  1. Set up local overrides.
  2. Make changes to files and save them in DevTools.

For example, you can edit files in Sources or CSS in Elements > Styles, unless the CSS lives in HTML files.

DevTools saves the modified files, lists them in Sources > Overrides, and shows you the Saved. icon next to the overridden files in the relevant panels and panes: Elements > Styles, Network, and Sources > Overrides.

The corresponding icons next to overridden files in Sources, Network, and Elements then Styles

Additionally, the Network panel shows a purple dot icon with a tooltip next to the Response tab of a request with overridden web content.

The purple dot icon with a tooltip next to the Response tab.

Override XHR or fetch requests to mock remote resources

With local overrides, you don't need access to the backend and don't have to wait for it to support your changes. Mock and experiment on the fly:

  1. Set up local overrides.
  2. In Network, filter for XHR/fetch requests, find the one you need, right-click it, and select Override content.
  3. Make your changes to the fetched data and save the file.
  4. Refresh the page and observe your changes applied.

To learn this workflow, watch the following video:

Track your local changes

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

Additionally, in Sources > Overrides, you can right-click the saved file and select Open in containing folder from the context menu. This opens the folder you selected during overrides setup. There, you can modify the files with your favorite code editor.

The 'Open in containing folder' option.

Override HTTP response headers

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

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

To override a response header:

  1. Set up local overrides and inspect, for example, this demo page.
  2. Go to Network, find a request, right-click it, and select Override headers. DevTools takes you to the Headers > Response Headers editor.

  3. Hover over a response header value and place a cursor there.

    The Response Headers editor.

    Alternatively, to enable the Response Headers editor, hover over a response header value and click Edit.

  4. Modify or add a new header.

    Modifying an existing header value, adding a new one, and removing an override.

    • 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.

    The Network panel highlights modified headers in green and removed overrides in red and crossed out. Additionally, the Headers tab shows a purple dot icon with a tooltip to let you know that headers are overridden.

  5. Refresh the page to apply the changes.

Edit all response header overrides

To edit all header overrides in one place:

  1. Click Saved. .headers next to the Response Headers section.

    The Header overrides link next to the Response Headers section.

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

  2. Edit the .headers file:

    Editing 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.

    • 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.