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
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.
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.
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.
In the Overrides pane, a checkbox should be displayed next to
Enable Local Overridesand 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.
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.
On the Sources editor, hover on the file name of your chosen file, open the contextual menu (right-click), and 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.
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.
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.
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.
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
I(Windows, Linux) or
I(macOS) in DevTools.
- Tweet at @EdgeDevTools.
- Submit a suggestion to The Web We Want.
- File bugs on this article using the Feedback section.