How to effectively debug minified JS files?

Question

I've got problem debugging minified JS on production server.

While you can't catch some errors on your machine while testing dev/prod servers, there's an opportunity to send some frontend errors and exceptions from users to a special log.

When JS files are minified, debugging this code becomes a hell.
What are the best practices in performing such work?

Answer 1

Biting the bullet ;) In chrome you can auto format the minified code from the sources panel

Then you can add debugger statements by clicking the line numbers. Run your code and find out more...

Answer 2

So, after some time, we've continued to try and resolve damn trouble and we've stumbled upon this library that allows you to map your stack to unminified version of build.

https://github.com/mozilla/source-map

We needed this to embed to our internal system that collects error reports. There are also ready solutions across the web if don't need your own like we do:

https://raygun.com/sourcemaps

https://sourcemaps.info/