Tran Cao Minh
MinhTC's Blog

Follow

MinhTC's Blog

Follow
How to Use Local Overrides in DevTools for Efficient Website Modifications

How to Use Local Overrides in DevTools for Efficient Website Modifications

Local Overrides feature in DevTools of most modern browsers. Some showcase, and benefits. The way to use it in Google Chrome browsers.

Tran Cao Minh's photo
Tran Cao Minh
ยทMay 10, 2023ยท

2 min read

Play this article

Table of contents

  • Intro
  • Some showcase that makes you interested
  • Benefits of local overrides
  • Steps to local overrides in Web Development tools (Google Chrome)
  • Conclusion

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 โค๏ธ.

ย 
Share this