Chrome DevTools has a handy feature. It lets you make changes on a website while testing or prototyping. However, these changes are lost when the page is refreshed or if you navigate away. To prevent this and make your changes persistent during testing, here’s how to set up local overrides.
Setup
You can override any file. For example it could be CSS, JavaScript or even an API response.
- Open Chrome DevTools by right-clicking on any page and selecting ‘Inspect’.
- Navigate to the ‘Sources’ panel in the DevTools.
- Right-click on the file you want to modify in the left sidebar and select ‘Override content’. This allows you to save the changes you make to this file locally.
- Select a folder on your computer where the overrides should be stored. Select ‘Allow’ when asked ‘DevTools requests full access’ to the file you selected.
- After choosing the folder, the file you selected will be saved there automatically when you make changes. This lets you refresh or navigate away without losing your work.
Overrides are persistent as long as the DevTools are open.
You can use the Elements tab to modify CSS. If you’ve turned on overrides for the relevant CSS file, these changes will be remembered. Additionally, you can add new classes directly through the inspector’s stylesheet.
Track your changes
To see your edits, open the ‘Changes’ panel by pressing cmd + shift + p (Mac OS) or ctrl + shift + p (Windows) and type ‘show changes’. This will bring up a new tab called ‘Changes’
Disable local overrides
If you don’t want the local overrides active:
- go to Sources in Chrome DevTools and click on Overrides
- uncheck the box ‘Enable local overrides’
Note if you have overrides active, the ‘Network’ tab has a triangle alert symbol.
Delete and start again
To get rid of your changes you can delete them:
- in Sources under Overrides, you can see the files you’ve changed
- right-click the folder or file and select delete. You’ll be asked ‘Are you sure you want to delete this file?’
Limitations of local overrides
Local overrides in Chrome DevTools are great for CSS tweaks. But, you can’t save HTML changes made in the Elements panel. This limitation makes sense, considering that when the DOM loads, other assets like JavaScript may alter the final output of the HTML. For persistent changes, you’ll need to locate and edit the HTML file directly in the Sources panel.
