TIL: Local overrides in Chrome

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:

1. Open Chrome Developer Tools:
   – Right-click on any webpage and select “Inspect” or press `Ctrl+Shift+I` (Windows/Linux) or `Cmd+Opt+I` (Mac).
2. 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.
3. 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.
4. 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.
5. 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.