Debugging web apps: Local Overrides

Have you ever had to figure out exactly what was wrong with an web app you didn't have access to the source code for? Sure, most experienced webdevs know they can pop open the chrome developer tools and play around with the CSS to fix just about any style related issue... but what if the javascript is causing the issue?

Local overrides to the rescue

If you're working in Chrome, you can use a feature called local overrides to essentially run the web app with one or more files saved locally on your own file system. You can edit the source code then directly from the Sources tab once that's set up. You can even refresh the page and have your changes persist!

How to set it up

1. Open chrome developer tools.
2. Open the Sources panel.
3. Open the Overrides tab.
   
4. Click Setup Overrides.
5. Select which directory you want to save your changes to.
6. At the top of your viewport, click Allow to give DevTools read and write access to the directory.
7. Make your changes in the edit window.

If you're ever in a situation where you need to find a bug on a website you don't have access to, give local overrides a try. It might save you a lot of trouble.