How to effectively debug minified JS files?

One approach you can try is a reverse proxy.

The Chrome prettify feature is OK but I found the proxy approach more stable (you don't have to keep pressing that pesky {} button) and it will work on every browser (like those that don't have Chrome's prettify feature).

The proxy sits between your browser and the web server (which could be running on a remote server or your local machine). All the web requests go through the proxy except those you configure to serve from a different location. In this case you would serve an un-minified version of the JavaScript file from a local location rather than the remote minified version. I've used nginx reverse proxy for this (on Windows) but expect others could be used in similar fashion (e.g. HA Proxy).

Example steps and configuration below:

Configure your nginx\conf\nginx.conf file something like this, the important parts are the location alias (to intercept the JavaScript file request) and the location proxy_pass (to forward all other requests to the upstream server):

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile      on;
    keepalive_timeout  65;
    server {
        listen       8081;
        server_name  localhost;
        # the unminified version of the JavaScript file you want to debug
        location /context/js/compressed.js {
            alias "C:/dev/nginx-1.10.2/html/uncompressed.js";
        }
        # your remote web server
        location / {
            proxy_pass http://1.2.3.4:8080/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

Start nginx

open a command window (run cmd.exe)
cd\
cd C:\dev\nginx-1.10.2
start nginx

Open browser e.g. http://localhost:8081/context/index.html

The proxy fetches all resources from the remote server except the file requested from http://localhost:8081/context/js/compressed.js which the proxy now serves from the locally cached (unminified) file (i.e. the file uncompressed.js).

If you don't have one, you can create your uncompressed.js easily with an un-minifier / beautifier (though the original pre-compressed file would be besst as it would have all the meaningful names). The important thing is it's functionally equivalent to the minified file.

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/

What most people normally do is they have a javascript.min.js and a javascript.js. If you have a file that is minimized you can use an online tool like: http://unminify.com/ to un-minify it. So you can debug it easier.

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