Debugging JavaScript live on production

How often do you encounter bugs in production which are impossible to reproduce locally? IDK about you, but it happens a lot to me.

Viewing the script and adding a breakpoint might help us at times but what if we need to change something in that script? We’re out of luck, isn’t it?

Well, the one way in which I solve this issue is by using a chrome extension called Resource Override.

With resource override, you can override any resource, be it a script or style, etc to point to your local host (or any other resource). And once your local script is running, you can easily debug any issues.

Steps to achieve this:

1. Add Resource Override and CORS Extension to your chrome.
2. Open the network tab, select the resource you want to override, and copy the request URL.

ss Taken from medium website

3. Open tab named override in your dev tools (this will mostly be at last). Next, enter the URL of the website and click on add Rules.

4. Next, enter the link you copied in step 2 and paste it in the From field. In the To field, enter the link of the file with whom you want it to override.

Make sure to check the on button for this to work.

Now, once you refresh the page you should be able to see the network call happening for the new link. You can add a debugger or change the script and see the changes live in production. Awesome isn’t it?

Note: In most cases, you will get a CORS issue, disable CORS with help of the extension we added before for that tab.

Note: Make sure the network protocol is the same while overriding. i.e. you can’t override https resource with http.

To create https server locally, I use ngrok

This has helped me a lot in debugging code directly in production without affecting any clients.

Special thanks to Kartik Maurya for introducing me to this amazing chrome extension.

Let me know if there are other ways to debug JavaScript in production.

I hope you found this article useful. I would love to hear your thoughts. 😇

Thanks for reading. 😊

Cheers! 😃

If you find this article useful, you can show your appreciation by clicking on the clap button. As the saying goes, When we give cheerfully and accept gratefully, everyone is blessed.