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.
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 😉
Top comments (1)
I enabled the override network requests option in the Command Palette and then selected "Open in Source panel" for one of the *.js files in the Network tab. Even after making an edit, I'm not seeing the "Save for overrides" contextual menu item. Please advise.
Also, it looks like only files served from the current domain are editable.