Is there a plugin that allows me to automatically unminify the Javascript included on a site?
JavascriptFirebugMinifyJavascript Problem Overview
Is there a plugin, add-on, Greasemonkey script or something similar (at worst, an easy to use proxy?) that automatically unminifies the Javascript files included on a site?
I know about e.g. jsbeautifier.org but doing this externally doesn't allow me to set breakpoints in the unminified code, for example.
Typical use cases for me:
- Analysing and learning from complex web frontends.
- Debugging Greasemonkey scripts which interact with the existing code.
I'm primarily interested in a solution that works with Firebug, but if there's something for the dev tools of Chrome or Opera, I'd like to hear about it as well.
Javascript Solutions
Solution 1 - Javascript
Someone has made JSBeautifier into a Firebug plugin:
https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/
This has made my day today!
Solution 2 - Javascript
In chrome 13+, there is 'pretty print'.
- Right click 'inspect element'
- Go to Script tab
- Click the curly braces in the bottom right.
Solution 3 - Javascript
Venkman JavaScript debugger has a pretty-printer.
There is also an extension for Fiddler proxy.
IE9 developer tools also have a "format javascript" option (see "F12 Developer Tools and Formatting Minified Script" here)
Solution 4 - Javascript
FYI - the same functionality is available in IE9's F12 Developer Tools: With script tab open, select the hammer/wrench button on the button bar ("Configuration"), and select "Format JavaScript".
Solution 5 - Javascript
If the script is only minified for whitespace, some of the solutions offered may work. As you mention, JSBeautifier is a useful tool.
However, if the JavaScript you're looking at has been compressed with a tool such as YUI Compressor or Google Closure Compiler, the variables are going to be shortened and harder to understand.
To see this in action, compare the minified and unminified versions of jQuery (minified version uses Closure Compiler).
- original: https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js
- minified: https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
For the goal of learning JavaScript, I recommend learning from libraries and plugins written by some of the best JavaScript developers out there. Look at the source code for jQuery, YUI, Moo Tools. Look at code on GitHub by people like John Resig or Thomas Fuchs. Read DailyJs and look at his examples.
I hope some of these tools help you in the process of learning. These are the resources that have helped me most.
Solution 6 - Javascript
Webkit/Chromium can now do this as well, see Webkit Bug 57942, Changeset 83713 and Peter Beverloo's change summary post mentioning this.
Don't ask me starting with which version of Chromium/Chrome this is available, but feel free to mention here if you do know. :)
Solution 7 - Javascript
"Auto Prettify Minified Sources" setting of Firefox Firefox Developer Tools turns the Prettify Source feature on by default.
To enable it:
- open Firefox Developer Tools (Ctrl + Shift + I)
- Debugger tab
- engine icon on top right of the Debugger tab, not the global settings engine
This is documented at: https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file
Tested on Firefox 42.
Solution 8 - Javascript
Is not possible with current tools. Show eval scripts is the most you can get. Jsbeautifier.org is nice open thing, and someone can integrate it info firebug.
Solution 9 - Javascript
PrettyPrint is a nice chrome extension for this, it automatically unminifies js in a heartbeat while using regular (Ctrl-U) source.
You can get it here:
https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg/