Here's Why You Should Be Using Overrides in Chrome Devtools

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

Overrides is a feature in devtools that helps you override any asset in a website and make changes to it, like Javascript or CSS files. You can override files that a website uses and see your changes in action on the website right away.

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 CTRL+SHIFT+I.

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.

When you do, you are ready to use overrides on this website. You can go back to the devtools Sources tab, then click on Page. Choose a file like a Javascript or CSS files, right click it and choose "Save for overrides." The file you choose will now appear in the Overrides tab.

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.

Conclusion

Do you use Overrides when developing your website? What other tools do you think are also helpful? Let us know in the comments!