How can I debug a minified JS in firebug?

javascript debugging firefox firebug

42,536

Solution 1

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

Solution 2

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)

Solution 3

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! :)

Solution 4

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.

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)
If you debug an HTTPS website, check this first:
http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
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
Find the file you want to debug in the list (Ctrl+F works)
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)
Go to AutoResponder tab (top left pane).
Select "Enable automatic responses" checkbox.
Select "Unmatched requests passthrough" checkbox.
Drag your file from left pane to right pane (prefills rule editor at the bottom)
Set the other field with the path of your local file
Click the Save button
Reload the page and enjoy your debugging session.

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

Solution 5

Pretty-print your JavaScript. Google this and you'll find multiple on-line JS beautifiers.

I happen to use http://jsbeautifier.org/ myself and it works fine, but search for others and use one that suits your needs.

Caveat: You still won't be able to get meaningful local variable names (which are usually renamed by a minifier). If the code was compiled by the Closure Compiler, then you absoutely won't get any useful information back at all, even when beutified, because then all variables and functions and properties are mangled (not only local ones).

Now, if your problem is with debugging code that comes from outside (e.g. a CDN), obviously that code would be minified, and you can't save your beautified version back there. In this case, you can replace the tags that load code from a CDN with a url pointing to your local version, then you can beautify the code (downloaded from the CDN) into your own server and you can then debug with FireBug.

Now, if you don't even control the HTML that contains those tags (e.g. they reside on a outside server), then unfortunately there is no way for you to do what you want without physically downloading the entire site to your own server. Even if you downloaded the entire site (with all the files), it may not work since the site may be driven by a back-end processing language or accesses a back-end database. In such case you'll also need to simulate all those data. It can be done, however -- you just have to go through a lot of pain. My recommendation is to save a version of the web page and run it on your own server, serving beautified code from your own server to debug.

View more solutions

42,536

Author by

Kumar

I am a run of the mill LAMP guy who is a self proclaimed guru of everything LAMP. I blog at http://www.kumarchetan.com/blog/ as a super duper numero uno techie.

Updated on November 27, 2020

Comments

Kumar over 3 years

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 an issue in JS and I wan't to debug it. When I load the JS in Firebug's script tag it appears in one long horizontal line. Is there a way out in Firebug that expands or beautifies the script for debugging? I know I can use jsbeautifier but they wont help me. I can not upload an expanded file to CDN, defeats the purpose of using CDN.

Points to be noted,
a) I can not control the box which serves JS, its on CDN, I mentioned it.
b) I can use beautifiers etc but would that help me in debugging the script in run time? IMHO, no
c) Being bound by NDA and other legal things I can not share the script but its a generic problem, you can encounter it with a minified jQuery
Kumar about 13 years

I guess you didn't understand the issue, I have added clarifications
Stephen Chung about 13 years

See my caveat. You won't be able to reverse engineer a minified piece of JS code without the original source because local variables are usually renamed. The standard jQuery distribution is minified with the Closure Compiler in Simple Mode (not Advanced). It does a very good job in obfuscating everything except public function/property names.
Kumar about 13 years

in my case the script is just minified not obfuscated, white spaces removed thing
Stephen Chung about 13 years

However, you can always "map" the beautified code with the original source (if you have it). Then you can just compare lines one by line to see which line in the minified code corresponds to which line in the original source, and which renamed local variable corresponds to which original variable name. Notice that if the code is processed by the Closure Compiler in Advanced Mode (like most of Google's JS code), then the compiled code will show little resemblance with the original source -- and you'll need to be extremely well-trained in using the Closure Compiler to map them back.
rsp about 13 years

@Stephen: jQuery uses UglifyJS now – see commit d503845d.
Kumar about 12 years

I found that 2 months ago, but the question is an year old now. I mostly use Firefox, just out of habit and hence was the question.
Matthew Flaschen about 11 years

Source Maps sound very useful.
svick over 9 years

Oh, Firefox has that too, I didn't notice.
Mohamed Hussain over 9 years

It solved my issue to use the Dev code to debug.thanks.
dizel3d over 9 years

Unfortunately, *.min.js.map files cannot show you mapping between original and renamed variables (arguments). Theoretically, I think, in case of function arguments it could be done, but in practice browsers don't do that.
Kyle Heironimus over 9 years

This is an old answer. My answer (Load the minified file and press the {} button) now applies to Firefox 31+
Kyle Heironimus about 9 years

This is an old answer. My answer below (Load the minified file and press the {} button) now applies to Firefox 31+ and is much simpler.
HDJEMAI about 8 years

For Firefox this is not enough all the time. I'm facing this minification problem right now. Some files still not minified. There is no request to the server to get the non-minified file when jour just press { }
narduk over 7 years

Do breakpoints work in Firefox? It looks like it only supports breakpoints on the first line as if javascript had not been pretified.
Alexis Wilke almost 3 years

Ah! Excellent. Someone mentioned that you have to click on the {} but did not specify the location and after a few minutes reading your post and I found it immediately. Well hidden when you don't know where it is...
Accountant م over 2 years

Why some file do not have {} button ?