Chrome Devtools are packed with many tools that can help your testing, debugging, and development in general easier and faster. There are many features that developers are not familiar with or don't use often. One of those features is Overrides.
What is Overrides
Why Use Overrides
When debugging websites, so many people make edits in the Sources panel in the Page panel to quickly test something. This can be helpful in some cases, however, those changes that you make are not permanent. Once you reload the page, the changes will be gone. So, if you are testing or debugging something throughout different pages or on load of a certain page, this method will not work.
Overrides are persistent as long as the devtools are open. When you override a file and make changes to it, the changes will persist even after you reload the page or switch to a different page.
Overrides can be extremely helpful when you are debugging a bug on your website or chrome extension that's only happening in production. Other methods to do that can be a hassle or ineffecient.
How to Use Overrides
To use Overrides, open the Devtools either from the settings or using the keyboard shortcut
Then, Click on the Sources tab. You'll see at the top of the left menu 3 tabs: Page, Filesystem, and Overrides.
Click on Overrides. Below it you will see "Select folder for overrides." Click on it and choose a folder. This folder will store all the overrides you make.
Once you select a folder, a prompt will show up at the top of the page. Click Allow.
Now, any changes you make to the file will persist throughout page reloads and navigating pages in the website as long as the devtools is running.
To stop overriding files on the website, go to the Overrides page again and click on the icon for "Clear configuration" and the overrides will be gone.
Do you use Overrides when developing your website? What other tools do you think are also helpful? Let us know in the comments!