Mastering Chrome DevTools: Edit production code on-the-fly in your browser ✏️

Chrome DevTools allows not only for pretty formatting and debugging the minified JS code of any production website, but also (which was surprising to me!) gives you ability to edit this production code in your browser on the fly! You can apply your custom local edits to any source JS file and after the next page refresh your code will run instead of the default one. You just need to enable the hidden feature of Devtools, called local overrides. Thanks to that, you can not only conveniently inspect the production code of any website, but also comfortably even try out an idea of a possible bugfix in this production code without a need to deploy the updated version of code, but just making edits locally in your browser!

Edit JS code locally in your browser!

To edit any file of any website, you need to first make sure you have enabled the feature of Chrome DevTools called local overrides. Here's how to do it quickly: in DevTools window open the command palette by pressing the hotkey Cmd+Shift+P (similar to what you would do e.g. in Visual Studio Code) and then type Enable override network requests, and hit Enter. It suffices that you enable this feature once.

Don't worry when you see that your Network tab now shows a warning sign "⚠️" - it only indicates that some of the files might be now replaced by your customized versions:

Then you can edit any source file of the website! Just right-click at any source code filename and from the opened contextual menu please select the option Save for overrides.

You might notice a small pink dot near the icon of this filename - it's signaling that your local version will take precedence over the default source code (but only after the page refresh).

So now you can edit this file and save your changes many times with pressing the hotkey Cmd+S. And after you refresh the page, your customized source code should be used instead of the default one! This way you can for instance conveniently try out an idea of a possible bugfix in the production website, without a need to deploy a new version of code, but just make edits locally in your browser!

Notes

The same technique can be applied to override also HTML files, not only JS ones.

For more, see the official Chrome DevTools docs on the Local network overrides.

If you really feel like buying me a coffee

... then feel free to do it. Many thanks! 🙌

Appendix: Pretty print and debug minified JS code

Pretty print the minified JS code

Open the Chrome DevTools' tab Sources and in the left hand pane open a file that interests you. Then click the icon with curly braces { } in the bottom left corner of the central view with the source code.

After clicking this button, the source code should get a nice formatting and lines indentation, to allow to better readability of the code:

Inspect and debug the code

Now you can conveniently set anywhere a breakpoint, which will stop the execution of the code in a line that interests you, allowing for inspecting deeper the context, values of variables, the other functions higher in the stacktrace, etc.

Here's a screenshot of setting a breakpoint:

The screenshot below shows how the execution was paused at this line after refreshing the page (and therefore rerunning the code). Please also note in the right-hand pane, that you can inspect values of all Local variables while the execution stopped at this line

When you scroll down the right-hand pane you will be able to also review the Call Stack of the currently paused code. Thanks to that you can understand which higher functions led to eventually executing the currently paused line of code.

Moreover, inside the Call Stack section you can also click any of those higher functions' names and then you will see the source code of the higher function. For instance below you can see the body of the 3rd function in the Call Stack which I clicked (anonymous):

While having this higher function's body opened, we can scroll up the right-hand pane and inspect Local variables from the context and time of this higher function's invocation!

That's it, I hope you find it useful! Happy debugging and editing the production code 😉