Override webpage resources with local copies using Microsoft Edge DevTools

Sometimes you need to fix a problem on a webpage that you do not have access to or fixes involve a slow and complex build process. You may debug and fix all kind of problems in DevTools. But the problem is the changes do not persist. After you refresh the 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. In the Sources tool, find several sections on the left-hand side. If the Overrides option is not displayed, choose the icon to get there.

  2. After you choose the Overrides option, you must choose a folder on your local computer to store the resource files that you want to replace. Choose the + Select folder for overrides to search for a folder.

    Choose a folder to use for overrides

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

  4. In the Overrides pane, a checkbox should be displayed next to Enable Local Overrides and your overrides folder. An icon is displayed next to it that allows you to delete your local overrides settings. You are now done setting up your folder and ready to replace live resources with local ones.

    Successful set up 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.

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • File bugs on this article using the Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools