441

Are there any command line scripts and/or online tools that can reverse the effects of minification similar to how Tidy can clean up horrific HTML?

(I'm specifically looking to unminify a minified JavaScript file, so variable renaming might still be an issue.)

2

12 Answers 12

511

You can use this : http://jsbeautifier.org/ But it depends on the minify method you are using, this one only formats the code, it doesn't change variable names, nor uncompress base62 encoding.

edit: in fact it can unpack "packed" scripts (packed with Dean Edward's packer : http://dean.edwards.name/packer/)

Sign up to request clarification or add additional context in comments.

3 Comments

did you mean base64 encoding? I've never heard of base62 encoding...
is there such a thing as a tool that "changes variable names" and is still aware of JS syntax to not break the code?
162

Chrome developer tools has this feature built-in. Bring up the developer tools (pressing F12 is one way), in the Sources tab, the bottom left bar has a set of icons. The "{}" icon is "Pretty print" and does this conversion on demand.

UPDATE: IE9 "F12 developer tools" also has a "Format JavaScript" feature in the Script tab under the Tools icon there. (see Tip #4 in F12 The best kept web debugging secret)

enter image description here

6 Comments

For the particular .js I was trying to un-minify, this method worked the best, cheers.
This is now in the "Sources" tab, not the Scripts tab.
@mhenry1384: Yes, Chrome did rename the tab. I updated the answer accordingly.
YES!! (our app does not have a debug/dev mode for js that I am aware of -- we thankfully do not shorten/transform variable names.)
Just a heads-up: Chrome sometimes messes up the JavaScript code. For instance, if (a) /regex/.match(foo); is pretty printed as if (a)\n / /regex/ .\nmatch(foo); which is a syntax error.
|
58

Got it! JSBeautifier does exactly this, and you even have options for the auto-formatting.

Comments

17

Can't you just use a javascript formatter (http://javascript.about.com/library/blformat.htm) ?

3 Comments

+1 for answer that also works. fabien just happened to reply first
This only answer the "decompress" part of the question.
Nope this is not working good. It break the code... :(
14

In Firefox, SpiderMonkey and Rhino you can wrap any code into an anonymous function and call its toSource method, which will give you a nicely formatted source of the function.

toSource also strips comments.

E. g.:

(function () { /* Say hello. */ var x = 'Hello!'; print(x); }).toSource() 

Will be converted to a string:

function () { var x = "Hello!"; print(x); } 

P. S.: It's not an "online tool", but all questions about general beautifying techniques are closed as duplicates of this one.

2 Comments

Interesting. I asked the question 2.5 years ago so I feel it's too late to edit the title, but I still like seeing both online and offline options. Thanks for chiming in. +1
Doesn't seem to work any more on firefox
10

If you have a Mac and TextMate - An easy alternative for formatting Javascript is:

  1. Open the file with Textmate.
  2. Click on > Bundles > JavaScript > Reformat Document
  3. Crack open a beer.

Comments

7

Most of the IDEs also offer auto-formatting features. For example in NetBeans, just press CTRL+K.

Comments

5

As an alternative (since I didn't know about jsbeautifier.org until now), I have used a bookmarklet that reenabled the decode button in Dean Edward's Packer.

I found the instructions and bookmarklet here.

here is the bookmarklet (in case the site is down)

javascript:for%20(i=0;i<document.forms.length;++i)%20{for(j=0;j<document.forms[i].elements.length;++j){document.forms[i].elements[j].removeAttribute(%22readonly%22);document.forms[i].elements[j].removeAttribute(%22disabled%22);}} 

Comments

5

I'm not sure if you need source code. There is a free online JavaScript formatter at http://www.blackbeltcoder.com/Resources/JSFormatter.aspx.

Comments

5

Similar to Stone's answer, but for Windows/.NET developers:

If you have Visual Studio and ReSharper - An easy alternative for formatting Javascript is:

  • Open the file with Visual Studio;
  • Click on ReSharper > Tools > Cleanup Code (Ctrl+E, C);
  • Select "Default: Reformat code", and click OK;
  • Crack open a beer.

Comments

4

Despite its miles-away-from-being-pretty interface, JSPretty is a good, free and online tool for making javascript source codes human-readable. You can enforce your preferred type of indentation and it can also detect obfuscation.

Comments

3

I created Pretty Diff, which will beautify (pretty print) JavaScript in a way that conforms to JSLint and JSHint white space algorithms.

1 Comment

It's ironic the site is so un-pretty, but this is a cool tool.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.