Frontend Quick Tips #15 Debugging a Nasty Bug on Production

Bernard Klatka

Sep 2, 2021 • 2 min read
Ruby on Rails & Elixir

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

code gif

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.

code

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.

code

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.

Quick access to websites mentioned in the article

https://developers.google.com/web/updates/2018/01/devtools#overrides

More posts by this author

Bernard Klatka

Codestories Newsletter  Check what has recently been hot in European Tech.   Subscribe now