Local Overrides in the Browser: Guide for Web Developers

There are times when you need to make quick changes to a webpage’s content without having access to the original source code. Whether it’s for testing, debugging, or simply customizing your browsing experience.
In this article, I’m going to present how to use the Local Overrides awesome tool.

Why do I need it at all?

When developing a web application, there are times when we need to make changes and test various aspects of a specific page. We have the option to modify the source code and rebuild the application's files for every change before serving it. Alternatively, we can live coding and immediately test the changes without altering the codebase until the desired results.
By using that tool we can:

1. Feedback — See changes in real-time without needing to modify the actual source files or redeploy the website.
2. Experimentation — Quick experimentation with different styles, scripts and HTML.
3. Problem Isolation and Error Correction — Enables fixing and testing minor issues directly in the browser, and then can be applied to the source code.
4. Demos Perspective — It allows temporary customization to meet client requirements during demonstrations without affecting the codebase.

And a lot more!

How do I interact with this great tool?

To begin, let's set up an override folder to save all our files. Click on the "Sources" tab and in the left sidebar, select "Overrides."

The next step would be to click on “Select folder for overrides” to choose a folder or create a new one to host all the override files. I have created a new folder called “chrome_overrides“.
DevTools will ask for full access to the selected folder so it can write to the disk and save content inside that folder.

Note: I will demonstrate on Pokemon’s website, but feel free to use any website you desire.
link: https://pokemon-kde6.vercel.app

To edit a resource on a website, open the DevTools and go to the “Network” tab (The Network tab is just an example. We can override content from other places within DevTools, for example, Sources -> Page.), Then, select the resource you want to edit. In my case, I want to make some adjustments and test it on my application before applying those changes to my code. I select the CSS file (it could be any file, but I chose the CSS file), right-clicking on it, and choose “Override content” from the menu that appears.

After clicking on the “Override content” the DevTools “Network” tab will be redirected to the “Sources” tab with the saved resource.

Now, let's attempt to change the main color and see the changes reflected on the screen.

Before:

After:

Do you see the changes?
P.S.: After making the changes, please remember to save.

Whenever you refresh the page and fetch the website’s files, the override content will take precedence. If the changes are no longer required or if we want to see the original files being fetched from the server, unchecking the “Enable Local Overrides” will do the trick.

In Summary:

Using local overrides provides numerous advantages, here are some of them:

1. Local Development and Testing — getting instant feedback and experimentation.
2. Debugging and Troubleshooting — assist with problem isolation and error correction.
3. Customization for Client Demos — allow temporary customization to meet client requirements

Thank you for giving your valuable time to this article. I hope you enjoyed it while reading.
Happy Coding!