Frontend Quick Tips #15 Debugging a Nasty Bug on Production

Sep 2, 2021 • 2 min read

No one likes those big articles - that’s why we’re creating Quick Tips - short tips to change your developer's life from the moment you read them. Those may be some patterns explained in JS code on real-life examples or some techniques for better code.

Problem

Have you ever gotten a headache because of a bug that only occurs on production and is not reproducible locally? Probably most of you pushed a hotfix without being 100% sure that it would work. After that, you checked if it worked on production. But there’s a better and quicker way of dealing with bugs like that.

Solution

Google Chrome’s DevTools Local Overrides comes to the rescue.

How to do it?

Open DevTools and navigate to “Sources” then click “>>” and select “Overrides.”

Now click “Select folder for overrides” and choose a folder where your local overrides will be saved. After that at the top of the page, you should see a prompt that asks you for permissions.

Allow it and once again navigate to the “Sources” tab. Select a file that you suspect contains a bug. Click “{}” at the bottom of the file.

And now you can edit code inside sources and it will be persisted even after reload!

Known issues

If you haven;t enabled Webpack’s source maps on production, this tip won’t work for you as the code won’t be readable. In cases like that, it’s better to base changes on Rollbar responses.