- Nov 10, 2017
- 3,250
Make permanent changes to web pages with Chrome's Overrides Dev Tool
Local Overrides is a relatively new experimental feature of the Developer Tools of the Google Chrome web browser that you may use to make permanent changes to web pages similar to how you'd do so using userscripts or userstyles.
While most users may not want to modify style or other content on web pages they visit regularly; some users want to do so to remove annoyances, improve usability or make other modifications.
A good example is a site that is too bright in the eyes of the user. Using overrides, you could change the style of the website to a dark one so that it is more eye-pleasing. You can also use it to increase or decrease font sizes, change fonts, remove background images, or manipulate any other element on the page.
Setting up Local Overrides in Google Chrome
Local Overrides is an experimental feature of Google Chrome that is available in all supported versions of the browser.
Local Overrides is a relatively new experimental feature of the Developer Tools of the Google Chrome web browser that you may use to make permanent changes to web pages similar to how you'd do so using userscripts or userstyles.
While most users may not want to modify style or other content on web pages they visit regularly; some users want to do so to remove annoyances, improve usability or make other modifications.
A good example is a site that is too bright in the eyes of the user. Using overrides, you could change the style of the website to a dark one so that it is more eye-pleasing. You can also use it to increase or decrease font sizes, change fonts, remove background images, or manipulate any other element on the page.
Setting up Local Overrides in Google Chrome
Local Overrides is an experimental feature of Google Chrome that is available in all supported versions of the browser.
Here is what you need to do to enable it:
Load chrome://flags/#enable-devtools-experiments in the browser's address bar and switch the flag to enabled. This allows Developer Tools experiments.
Load chrome://flags/#enable-devtools-experiments in the browser's address bar and switch the flag to enabled. This allows Developer Tools experiments.
- Restart the web browser.
- Tap on F12 to bring up the Developer Tools interface.
- Tap on F1 in the interface to open the Preferences.
- Switch to the Experiments tab and check "Override requests with workspace project".
- Visit a web page that you want to make permanent changes on.
- Switch to the Sources panel in the Developer Tools.
- Click on the icon with the two arrows pointing to the left, and select Overrides from the menu.
- Select "setup overrides" and pick a local folder that you want to store the overrides in.
- Accept Chrome's request to access the folder.
Using Local Overrides in Google Chrome
Using overrides for resources is pretty straightforward. Open the Network panel in the browser to get started. If you don't see any loaded files reload the page to populate the listing.
Right-click on any resource file that you want to override and select the "save as override" option. Chrome saves the data to the local system and will use it instead of the original resource when it loads the web page.
You may edit the file then under Sources > Overrides. This works well for styles, but you can override pretty much any source file including HTML pages and JavaScript files.
Overrides are saved automatically, and you may delete them from the overrides listing in the Chrome Developer Tools, or use the preferences instead.
The overrides section of the Developer Tools preferences list all sites with overrides. When you hover over an entry, you may delete it to remove all overrides or click on edit to change the domain name.
Check out the following instructional video that highlights how you may use the feature to improve the performance of web pages.
Using overrides for resources is pretty straightforward. Open the Network panel in the browser to get started. If you don't see any loaded files reload the page to populate the listing.
Right-click on any resource file that you want to override and select the "save as override" option. Chrome saves the data to the local system and will use it instead of the original resource when it loads the web page.
You may edit the file then under Sources > Overrides. This works well for styles, but you can override pretty much any source file including HTML pages and JavaScript files.
Overrides are saved automatically, and you may delete them from the overrides listing in the Chrome Developer Tools, or use the preferences instead.
The overrides section of the Developer Tools preferences list all sites with overrides. When you hover over an entry, you may delete it to remove all overrides or click on edit to change the domain name.
Check out the following instructional video that highlights how you may use the feature to improve the performance of web pages.
Closing Words
Local Overrides is an experimental feature which means that Google may pull it in the future or integrate it fully in the browser. For now, it is an excellent option to change the style or code of web pages that you visit regularly and an alternative to using userstyles or scripts for that.
The main advantage of the built-in option is that you can use Chrome's Developer Tools to see the changes in realtime without having to save external files manually and reload pages each time you make changes.
The main advantage of the built-in option is that you can use Chrome's Developer Tools to see the changes in realtime without having to save external files manually and reload pages each time you make changes.
