Web Inspector ReferenceLocal Overrides

As web development workflows have gotten more complicated, it’s become increasingly difficult to make quick changes to a resource and upload it to a server to test.

Some parts of a page’s content can be modified live using Web Inspector, such as CSS or any JavaScript values, but these changes are not persistent across page reloads/navigations.

Often, however, the desired change is a modification to the control flow of a loaded script or data included with network activity.

In these cases, Web Inspector is in a perfect position to intercept the network activity and replace it with a local override, allowing for quick local testing without having to modify anything on a server.

When Web Inspector is open, network requests made by the inspected page that match the URL of a local override will instead use the the response content and MIME type, response status, and response headers from Web Inspector, rather than from the network or memory/disk cache.

Creating Local Overrides

Local overrides can be created in a few ways:

  • Clicking the [Create Local Override] navigation item when viewing the contents of a resource that was loaded from the network.

    This will create a local override for the selected resource by coping all of the resource’s data, including the response status, and any response headers.
    If the selected resource is not text-based (e.g. images, fonts, etc.), clicking the [Create Local Override] navigation item will instead show a file picker, after which a local override will be created using the MIME type and contents of the chosen file (if any). Additionally, for non-text-based resources, shift-clicking the [Create Local Override] navigation item will behave as for text-based resources and simply copy the resource as-is.

  • Right-clicking on links or tree items that correspond to a resource loaded from the network and selecting Create Local Override.
    This will create a local override for the related resource by coping all of the resource’s data, including the response status, and any response headers.
  • Dragging and dropping a file over any non-text-based resource loaded from the network.
    This will create a local override with the MIME type and contents of the dropped file, but with the response status, and response headers of the selected resource.
  • Selecting Local Override… when creating a resource.
    This will create an “empty” local override that needs to be configured before it will have any effect.

Once there is at least one local override, the Local Overrides section will become visible in the navigation sidebar in the Sources Tab. All local overrides, as well as the Inspector Bootstrap Script, can be found here.

Local overrides are persistent across Web Inspector sessions, but keep in mind that local overrides don’t have an effect unless Web Inspector is open, and only apply the next time a resource is loaded that matches it’s configured URL.

Configuring Local Overrides

Modifying the content of a local override is as simple as editing the text in the content view. Alternatively, clicking the Import navigation item will show a file picker to completely replace the content and MIME type of the local override using the chosen file’s contents and inferred MIME type.

For non-text-based resources, dragging and dropping a file over the content view will update the content and MIME type of the local override using the dropped file’s contents and inferred MIME type.

If the desired changes are not related to the content, however, right-clicking on any local override tree item and selecting Edit Local Override… will show a popover with inputs for modifying the URL, MIME type, response status, and any response headers.

Checking the Regular Expression checkbox will instead treat the URL as a regular expression, allowing a single local override to match multiple resources. This can be especially useful for matching against URLs with query parameters.

The Content-Type response headers is automatically populated by the MIME type, and therefore cannot be edited.

Exporting Local Overrides

Exporting the contents of a local override works just like any other resource, in that pressing  S when viewing the contents of a local override or selecting Save File after right-clicking on any local override tree item will show a save file dialog.

Identifying Overridden Resources

Whenever a resource is overriden by a local override, it’s icon is inverted throughout Web Inspector.

When looking at the content view for that resource, a banner is shown at the top with a button to Reveal the corresponding local override.

Written January 14, 2020 by Devin Rousso and Joseph Pecoraro

Last updated August 10, 2020 by Devin Rousso