Local Overrides- for chrome DevTools

Google Chrome Overrides tool helps you to make changes in DevTools, and keep changes alive after page refresh, your changes are not deleted for the browser.  Earlier, code changes in DevTools would be lost after reloading the page

Chrome Override DevTool

How chrome override works

  • Specify a local folder where DevTools should save changes of JS/CSS files.
  • Whatever changes you did in DevTools, DevTools saves a modified file to your local folder
  • When you refresh the page, DevTools load the local, modified file, rather than the network file.

Override limitations

  • DevTools work with JS only not with DOM related changes, any changes related to HTML/CSS would not work.

Where is Override and how to set up?

  • Open the source panel inside you will find the override tab.
  • Click on the Select folder for overrides button
  • Specify the directory where you want to save the changes.
  • On top of the web page, Allow giving DevTools to read and write to modify changes in the directory.
  • Now start your debugging using alert(), console or debugger.