Iāve been doing web development professionally for about 10 years now and just discovered something new. (I love it when this happens!)
Today, I learned about local overrides in Chrome. Local overrides are a powerful feature within Chromeās Developer Tools that allow developers to make temporary changes to a web pageās files (CSS, JavaScript, images, etc.) directly within the browser.
These changes are saved to your local filesystem, allowing you to experiment with modifications without affecting the live website. This is especially useful for testing, debugging, and experimenting with different designs or functionalities.
Hereās how you can use local overrides in Chrome:
- Open Chrome Developer Tools:
ā Right-click on any webpage and select āInspectā or press `Ctrl+Shift+I` (Windows/Linux) or `Cmd+Opt+I` (Mac). - Enable Local Overrides:
ā Go to the āSourcesā tab.
ā In the navigation pane, click on the āOverridesā tab (you may need to click on the ā>>ā to see it).
ā Click on āSelect folder for overridesā and choose a folder on your local system. This is where your changes will be saved.
ā Allow Chrome to access the folder if prompted. - Start Editing:
ā Find the file you want to edit in the page file navigator pane. You can navigate through the websiteās file structure or find the file in the āNetworkā tab.
ā Right click on a file and select āOverride contentā
ā Once you open a file, you can modify it directly in the editor pane. Your changes will be reflected in real-time on the webpage. - Save Changes:
ā After editing, press `Ctrl+S` or `Cmd+S` to save your changes. These changes are saved to the selected local folder and will override the network resource until you disable overrides or delete the local file. - Disable Overrides:
ā To stop using local overrides, simply uncheck the āEnable Local Overridesā option in the Overrides tab.
Local overrides are a temporary way to experiment with web page modifications. They donāt affect the actual files on the web server, so other users wonāt see these changes. This feature is highly useful for developers and designers to test changes without deploying them to a live server.