How can I debug a minified JS in firebug?

Question

I have a web page which includes insane amount of minified JS files. The web page works perfectly fine on my local network but throws some JS error on staging. There is

Answer 1

Just load the minified file and press the {} button at the bottom and it instantly beautifies, making breakpoints and other debugging possible. (True for Chrome too)

Answer 2

1. Beautify your script
2. Add the CDN host in /etc/hosts or your local DNS to resolve it to your own web server
3. Host the beautified version and everything that you need on said web server
4. Both Firefox and Chrome (versions as of this edit) support beautifying script with the {} button available in the inspector.

Answer 3

Consider a Change!

Firefox w/ Firebug was my favorite JavaScript debugging method for almost a year, but I've recently moved to Google-Chrome's Developer-Tools which is far more superior.

• Chrome supports an On-The-Fly (built-in feature) beautification of JavaScript resources

• Once beautified, you are free to debug the JavaScript resource file, as it was "natively" downloaded beautified from the web-server. Breaking-points are set by clicking the line number.

• One of the most extremely powerful feature,
  Is once You've Stopped In A Breaking-point, You Are Free To Execute Commands (using console) In The Same Scope You ARE In The Breaking-point. In Firefox you can't do that. Its so easy to debug (even anonymous functions), You'll never be back to Firefox.
  Try It!

Answer 4

Placing breakpoints on JavaScript makes debugging much easier, but if your code has already made it to production then it's probably been minified. How can you debug minified code? Helpfully, some of the browsers have an option to un-minify your JavaScript.

In Chrome and Safari, simply select the 'Scripts' tab, find the relevant file and then press the "{ }" (pretty print) icon located in the bottom panel.

In Internet Explorer, click the tool icon by the script selection drop down to find the option to format the JavaScript.

Opera will automatically prettify minified JavaScript. Source

Answer 5

This is more a workaround, but it can help. The idea is that we will replace files coming from the server by files on your machine.
This will work with any browser.
It takes a bit of setup the first time (15 minutes maybe), but then it can be very convenient.
It can also helps testing your bug-fixes in a live/prod environment.

1. Get Fiddler (it's a web debugging proxy), install it, run it.
   http://www.fiddler2.com/fiddler2/
   (Restart browser after install to get the Fiddler extension)
2. If you debug an HTTPS website, check this first:
   http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
3. From now on, you should see in Fiddler ("Web Sessions" pane on the left) all downloads made by your browser, including JS files.
   If not, check this : Fiddler not displaying sessions
4. Find the file you want to debug in the list (Ctrl+F works)
5. Click on the file. Then either:
   • get the file content from the inspectors pane (textView tab), beautify it, save to a file on your local computer
   • or have access to a file which contains the source code (ex: from your source control)
6. Go to AutoResponder tab (top left pane).
   Select "Enable automatic responses" checkbox.
   Select "Unmatched requests passthrough" checkbox.
7. Drag your file from left pane to right pane (prefills rule editor at the bottom)
8. Set the other field with the path of your local file
9. Click the Save button
10. Reload the page and enjoy your debugging session.

Fiddler can do many more things, but this use-case answers the initial question.

Answer 6

This is a common problem and the Chrome dev team have recently come up with an elegant solution, which they've called Source Maps - see http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ for more info, I think you'll find it's exactly what you (and the rest of us) have been crying out for! :)