Local overrides are files that Chrome serves in place of a live request. But more than that, it watches the file for changes and injects the changes back into the page making it an absolute breeze to work with. There’s no build system or local dev server required, it just works. Here’s how:
-
Open devtools and go to the sources tab
-
Click ‘Overrides’ in the top-left corner of devtools. It might be behind the ›› menu.
-
Click ‘Select folder for overrides’ and choose a local folder to save the files to
-
Click ‘Allow’ on the pop-up bar that’ll appear
-
Go to the elements tab and click on a stylesheet name It’s on the right-hand side of any CSS declaration, something like main.css:1
-
Right click anywhere in the opened file, and click ‘Save for overrides’ Chrome will create a new file, copying all the existing styles into it.
Top tip: If you’re working with a minified file, click the {} button before choosing ‘Save for overrides’. This’ll beautify the code first and make your life much simpler! 🙌
- Open the newly created file in your text editor of choice! Any changes you make will be instantly reflected in the browser!
Override XHR or fetch requests to mock remote resources With local overrides, you don’t need access to the backend and don’t have to wait for it to support your changes. Mock and experiment on the fly:
Set up local overrides. In Network, filter for XHR/fetch requests, find the one you need, right-click it, and select Override content. Make your changes to the fetched data and save the file. Refresh. Refresh the page and observe your changes applied.
read more in link