Override webpage resources with local copies using Microsoft Edge DevTools

Sometimes you need to try out some possible fixes for a webpage, but you don't have access to the source files, or changing the page requires a slow and complex build process. You may debug and fix all kind of problems in DevTools. But the changes do not persist; after you refresh the local file, all your work is gone. The Overrides feature in the Sources tool helps you solve this problem.

You may now take a resource of the current webpage and store it locally. When you refresh the webpage, the browser does not load the resource from the server. Instead the browser replaces it with your local copy of the resource.

Setting up your local folder to store Overrides

  1. Navigate to the Sources tool.

  2. In the Navigator pane (on the left), choose the Overrides tab. If the Overrides tab is not displayed, choose the icon.

  3. Choose a folder on your local computer to store the resource files that you want to replace.

    • To search for a folder, choose + Select folder for overrides.

    Choose a folder to use for overrides

  4. DevTools warns you that must have full access to the folder and that you should not reveal any sensitive information. On the warning bar, choose Allow to grant access.

    grant DevTools access to folder

  5. In the Overrides tab, a checkbox is shown next to Enable Local Overrides. To the right of Enable Local Overrides is a Clear configuration icon that allows you to delete your local overrides settings. You are now done setting up your folder and are ready to replace live resources with local ones.

    Successful setup of an overrides folder

Adding files to your Overrides folder

To add files to your overrides folder, open the Elements tool and inspect the webpage. To edit, choose the name of the CSS file in the Styles inspector.

Choose a file in the Styles inspector

On the Sources editor, hover on the file name of your chosen file, open the contextual menu (right-click), and choose Save for overrides.

In the Sources editor, add the name of the file to overrides

On the context menu, choose Save for overrides

The file is stored in your overrides folder. Verify that DevTools create a folder that is named using the URL of the file with the correct directory structure. The file is stored inside. The file name in the editor now also shows a purple dot that indicates that the file is local and not a live one.

Successfully stored the file in your overrides folder

In the following example, you may now change the styles of the webpage. To add a red border around the file, on the Styles editor, copy the following style, and add it to the body element.

border: 10px solid firebrick

The file is automatically saved on your computer. If you refresh the file, the border is displayed and none of your work is lost.

Change webpage styles persistently by editing a file in your overrides folder

On the Sources tool, in the Page section, hover on any file, open the contextual menu (right-click), and add it to overrides. Again, files that are already in your overrides folder have a purple dot on the icon.

Choose a file from the Sources tool for overrides

Alternatively, on the Network tool, hover on any file, open the contextual menu (right-click), and add it to overrides. When overrides are in effect, files that are located on your computer and not from the live webpage. When overrides are in effect, on the Network tool, locate a warning icon next to the file name.

Choose a file from the Network tool for overrides

Two-way interaction of overrides

Use the editor provided with the Sources tool of DevTools or any editor you want to change the files. Changes are synced across all the products that access the files in the overrides folder.