436

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

Andy Ford
  • 8,289
  • 3
  • 25
  • 35
  • 4
    For those of you who may not be aware, minification changes internal variable names to a single letter and removes code comments. Undoing these changes cannot be automated. – Vivian River Feb 22 '13 at 16:33
  • @DanielAllenLangdon Good point. I've edited the question so it no longer implies that minification does not change variable names. – Andy Ford Apr 03 '13 at 16:24
  • 12
    FWIW... just found JS NICE http://www.jsnice.org/ – Andy Ford Jun 02 '14 at 22:10
  • http://marcusjenkins.com/linux/de-minify-javascript-on-the-command-line/ worked well for me. – ychaouche Mar 08 '15 at 11:07
  • 1
    For @DanielAllenLangdon: jsnice.org can unminify and de-obfuscate even 30k angularjs code. – Green Sep 04 '15 at 01:09

17 Answers17

507

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

Fabien Ménager
  • 139,991
  • 3
  • 39
  • 60
156

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

John Slegers
  • 41,615
  • 22
  • 193
  • 161
Jon Adams
  • 23,637
  • 18
  • 82
  • 118
58

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

Robin Rodricks
  • 105,357
  • 137
  • 385
  • 594
  • 5
    stackoverflow-then-google instead of google-then-stackoverflow? :)))) – dfa Jun 22 '09 at 16:29
  • I did the google for "javascript formatter online" – cgp Jun 22 '09 at 16:29
  • 1
    This FireFox plugin uses JSBeautifier to un-minify javascript so you can then set breakpoints on lines in FireBug's js debugger!!: https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/ – B T Jan 28 '11 at 00:44
16

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

Janco
  • 1,130
  • 1
  • 8
  • 15
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.

katspaugh
  • 16,674
  • 11
  • 64
  • 100
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.
Stone
  • 2,528
  • 25
  • 24
6

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

gou1
  • 306
  • 3
  • 10
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.
Community
  • 1
  • 1
C. Augusto Proiete
  • 20,243
  • 2
  • 51
  • 71
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);}}
Mottie
  • 79,894
  • 29
  • 121
  • 237
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.

Jonathan Wood
  • 61,921
  • 66
  • 246
  • 419
5

Try this one, with code coloration:

http://labs.swelen.com/tools/javascript/beauty.html

Swelen Team
  • 53
  • 1
  • 3
5

click on these link for JS deminification. That will install on FF as extension that help you in debugging js at runtime.

https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/eula/141018?src=dp-btn-primary

sanjeev
  • 51
  • 1
  • 1
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.

Farshid
  • 4,916
  • 8
  • 56
  • 84
3

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

austincheney
  • 1,171
  • 9
  • 11
3

Wasn't really happy with the output of jsbeautifier.org for what I was putting in, so I did some more searching and found this site: http://www.centralinternet.com.br/javascript-beautifier

Worked extremely well for me.

Doyle Lewis
  • 510
  • 4
  • 14
3

If one is in JS possibility of using Firefox is more. And if its Firefox add on is for rescue. Following one is particularly useful.

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

Anil Namde
  • 6,154
  • 9
  • 62
  • 99
2

http://unminify.appspot.com/ Great tools for unminify javascript and json

Bui Dinh Ngoc
  • 417
  • 4
  • 10