Intro

When interacting with Websites, you may want to modify the behavior of a Website to make you more productive 💪 like updating its styles, content, or what will happen after an event firing.

Local overrides with DevTools are a perfect solution for this purpose. It is a feature of most modern web development tools.

Some showcase that makes you interested

• Change the font of a Website (blog, tutorial, news) for readability

• Show your friends that your website looks different

• Remove unnecessary banners, advertise with custom JavaScript code

Benefits of local overrides

• Make temporary changes to a website without affecting the actual source code

• Test the modified behavior of the website before creating a pull request

• A convenient way to modify the behavior of a website without having to set up a development environment

• It also helps you be more productive by adding some JavaScript code that automatically does something (Like auto-fill and press the login button)

Steps to local overrides in Web Development tools (Google Chrome)

1. Open your Web development tool, and make sure you enable local overrides mode

   • Use Command+Option+I - Mac / Control+Shift+I - Window, Linux to open DevTools

   • Open the DevTools setting panel

     

   • Enable Local Overrides (Settings - Preferences - Persistence - Enable Local Overrides)

     

2. Use the Web Development tool's inspector to find the code that you want to modify

   • Close the setting panel and navigate to the Sources tab

     

   • Select a folder for overrides in Sources - Overrides

     

     

   • In the Sources tab, choose a file you want to override at Page in the sidebar (Here I choose ads/prebid7.43.0b.js to remove the top Advertised)

     

     

3. Save them as the local override

   • Open the override folder with any code editor (I am using VS Code)

     

   • Save the edited file and reload the browser (You can use some scripts to make it like hot reload 😊) - Please make sure your DevTools is open

     

4. Save its to your local only or create a Git repository for this purpose

   • For convenience, create a Git Repository and update our code 😊

     

Conclusion

Local Overrides are a powerful feature of modern web development tools that allow you to modify the behavior of a website on your local machine. I hope this blog helps you be more productive in web development. Thank you ❤️.