Mastering Chrome DevTools: Edit production code on-the-fly in your browser ✏️
Tags: debugging, chrome, devtools, production
Published: 2023-07-21 16:44:10

**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](https://developer.chrome.com/docs/devtools/overrides/#make-changes)_. 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](https://developer.chrome.com/docs/devtools/overrides/#make-changes)_. 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70rzla681mamrpwlrra1.png)


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:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4w8r540tsk6f9fj88mso.png)


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_. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twyfv5uinmbvp8hst3qw.png)


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).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpzcgkx4pk6mxd9i6351.png)



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!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8nyigfrpqxyrysxvmsl.png)


### 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](https://developer.chrome.com/docs/devtools/changes/#view-changes).

### Appendix: Pretty print and debug minified JS code


<br>

#### 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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4zj52n2c0lr3uhcuo61.png)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6c9rn33f9sxvk03re17.png)


#### 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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ictfu5jqrmqpynbph1yp.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6zz224t27j55orwcjob.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xch3vif9bem8zaaknm3b.png)


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)`:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdln240h60x8zse2h2sf.png)



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!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdnwehsk5ixcwgsatfol.png)



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