Is there a plugin that allows me to automatically unminify the Javascript included on a site? [closed]

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.


Someone has made JSBeautifier into a Firebug plugin:

https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/

This has made my day today!


In chrome 13+, there is 'pretty print'.

  1. Right click 'inspect element'
  2. Go to Script tab
  3. Click the curly braces in the bottom right.

Screenshot


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)


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


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.