58

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.

Henrik Heimbuerger
  • 9,924
  • 6
  • 56
  • 69

9 Answers9

77

Someone has made JSBeautifier into a Firebug plugin:

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

This has made my day today!

B T
  • 57,525
  • 34
  • 189
  • 207
  • 3
    I WANT TO UPVOTE THIS A MILLION TIMES. **THANK YOU!** (And thanks to Tim Stone for mentioning this answer to me!) – Josh Jan 28 '11 at 01:42
  • Oh that is beautiful. And surprisingly fast, much faster than the Fiddler solution. Can't believe I haven't found that before. – Henrik Heimbuerger Jan 28 '11 at 07:36
  • Unfortunately, this plugin is no longer maintained and does not work with Firefox 4. – skolima Jun 21 '11 at 12:55
  • Script has been updated to support 3.6-5.* – chauncey Aug 09 '11 at 18:03
  • Chrome's pretty print is much better than this. After installing press Ctrl+/ to show add-ons bar to enable/disable js deminification for a page. – hamdiakoguz Dec 19 '12 at 19:48
  • 2
    For those who read that it doesn't work, it's working perfectly fine for me on Firefox 20.0.1 – Populus May 07 '13 at 13:59
  • It isn't "integrated" into Firebug at all. – Robert Jun 07 '14 at 05:16
  • Sorry Robert, english is my first language. Corrected it to say precisely what everyone else already understood: that someone made a firebug plugin. Thanks for the downvote! Please, come again! – B T Jun 07 '14 at 08:32
41

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

Matthew Kelly
  • 3,094
  • 1
  • 19
  • 10
8

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)

Annie
  • 6,621
  • 22
  • 27
  • Fiddler works nicely. A bit slow, but that's what you have to expect when you're trying to unminify and reformat a big webapp. Not my preferred solution (would like to see direct Firebug integration), but this works. Thanks! – Henrik Heimbuerger Dec 04 '10 at 17:48
  • The Fiddler extension was updated Oct 2011 with the comment "Approximately 300 times faster than the old version, and less likely to mangle poorly formatted script." – Jeffery Grajkowski Aug 12 '13 at 23:55
3

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

kmote
  • 16,095
  • 11
  • 68
  • 91
1

"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

enter image description here

This is documented at: https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file

Tested on Firefox 42.

Community
  • 1
  • 1
Ciro Santilli OurBigBook.com
  • 347,512
  • 102
  • 1,199
  • 985
  • Makes no sense why pretty print is available for their Debugger, but not for their Style Editor – klewis Aug 21 '19 at 14:15
1

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

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.

calvinf
  • 3,754
  • 3
  • 28
  • 41
1

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

Henrik Heimbuerger
  • 9,924
  • 6
  • 56
  • 69
0

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/

3rik82
  • 45
  • 7
0

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.

JessyNinja
  • 153
  • 1
  • 5