Debug Production Code Live With Local Overrides

Debug Production Code Live With Local Overrides

Ferenc Almasi ā€¢ Last updated 2020 December 11 ā€¢ Read time 5 min read
How many times you came across an issue that was creating a nasty bug on production but was not reproducible locally? Local Overrides to the rescue...
  • twitter
  • facebook
JavaScript

How many times did you come across an issue that was causing you a great deal of headache because it was creating a nasty bug on production but was not reproducible locally?

All the necessary steps it takes to re-check whether a change locally does really solve the problem could be daunting and in fact, often unnecessary.

This is what I came across recently (again) and tried to figure out a way to debug my code on the real deal and verify what changes I need to make without having to commit, push, build and deploy then check the results again and again. This lead me to use Chrome DevToolā€™s Local Overrides. Itā€™s not a recent thing since itā€™s been with Chrome since version 65.

First I started looking into proxies to rewrite network requests and replace the minified and obfuscated production js with a local file, but I didnā€™t really felt like using an additional software is the right way. So I looked into Chrome extensions, there has to be one. And there was some, but either they were overly complicated for the job or had terrible UI. And the fact of adding another extension to Chrome didnā€™t really help either.

So I looked into Chrome itself, because I remember editing files and seeing my changes. The only problem with this is that when you have a minified file, you canā€™t really read it. Luckily thereā€™s a tool inside Chrome called ā€œPretty printā€, which does exactly that: formats the file to a readable format. The only problem with this, however, is that you canā€™t edit the pretty printed file.

Finding the pretty print file button
Locate the ā€œPretty printā€ icon at the bottom left corner of the editor

We can easily get around this by copy-pasting the pretty printed file to the original one, so now nothing prevents us from editing production-ready code right in the browser. Only refreshes. See, if you edit the file, save it and refresh the page, everything is gone, it is not persisted through reloads. This is where local overrides come into place.


How Does it Work?

In simple terms, Chrome map your resources to local files, and whenever a network request is made, it intercepts them and loads the local resource instead of requesting them from the server.


How to Enable it?

First, open up your DevTools and go to your Sources tab. Here youā€™ll see all of the source files loaded for a given page. Now change the ā€œPageā€ tab to ā€œOverridesā€ on the left-hand side. If itā€™s not visible, just click on the arrows to open the dropdown.

Finding Local Overrides in the Sources panel
Locate the dropdown arrow next to the ā€œPageā€ tab at the left side

Click on ā€œSelect folder for overridesā€ ā€” this is where all your resources will live. Preferably, create one just for the purpose of using local overrides and point to that folder.

Now you will see a checkbox saying ā€œEnable Local Overridesā€ which you need to check. A prompt will be shown at the top of your screen, click on allow to give DevTools read and write permission to the directory youā€™ve just created.

Allow read and write access to Local Overrides
Please donā€™t put it in your Windows folder

Now if you go back to the ā€œSourcesā€ tab, anytime you edit a resource, it gets saved to your local repository. So whenever you refresh the page, the changes are persisted.

Changes are persisted on page reload when Local Overrides are enabled
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScriptinfo Remove ads

Letā€™s See a Live Example

The following error is coming on my page and the animation for my heart icon is just not seem to work at all.šŸ’”

Error shown in the console
Uncaught TypeError: Failed to execute ā€˜addEventListenerā€™ on ā€˜EventTargetā€™ā€¦

Looking at the source code of my site, itā€™s hard to guess what actually goes wrong as itā€™s minified into one single line:

Minified version of the source code

Using the built-in prettifier doesnā€™t really help either as variables, function names, and everything else is obfuscated beyond recognition:

Formatted version of the source code

To get around this, I looked at the local code and rewritten the production function into a more readable format. After that, I got the following output which is a little bit more dev friendly:

Debugging the error

I also inserted a breakpoint at the line in question that causes the error. We can see that indeed, the second parameter is not a function but a string, but as we know, addEventListener expects a callback function as a second parameter, which is mistakenly passed as the first one. All we have to do is switch the two params around and now the beating animation works as expected:

Working version of code after fixing it with Local Overrides

As stated by the documentation, there are some limitations to it, but nothing really major and nothing that should prevent you from achieving what this post meant to demonstrate.


Limitations

  • Anything that is edited in the DOM tree will get lost. You need to edit the HTML in the ā€œSourcesā€ panel instead.
  • If your style is coming from an HTML file and you edit the CSS in the Styles panel, it will get lost as well. Anything thatā€™s in the HTML, you need to edit the HTML file in the ā€œSourcesā€ panel instead.

Summary

This sums up the Local Overrides feature in Chrome. You can not only use it to speed up your development and see changes live by persisting them through page reloads, but it also helps you in cases where environment differences makes it difficult to debug a faulty function that wonā€™t reproduce the same issue locally, it does on a staging or production env. All thatā€™s left to do, is to go ahead and fix those nasty bugs you were sitting on for days. šŸ’ŗ

  • twitter
  • facebook
JavaScript
Did you find this page helpful?
šŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.