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
Navigate to the Sources tool.
In the Navigator pane (on the left), choose the Overrides tab. If the Overrides tab is not displayed, choose the
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.
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 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.
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.