How to Unminify Javascript Code

Programming Tips

As websites have moved away from static pages to interactive updating displays, the modern Greasemonkey hacker has been forced to learn new tricks: namely interacting with the Javascript on a website. Sometimes that’s harder than it looks because the Javascript on the site you want to modify has been minified.

Minifying is a process where all the comments, whitespace and variable names of a file are removed so that it is smaller in size. This is better for the users because it takes less time to load the site. It’s worse for Greasemonkey hackers because all you get is a mess of gobblety gook.

  1. Install this javascript beautifier Greasemonkey script
  2. Cut-and-paste the minified javascript from the site you want to work with
  3. Visit nopaste.voric.com and cut-and-paste the code from the site
    1. Click the Javascript option
    2. Change “Save until” to 1 day
    3. Cut and paste the code from the site
    4. Click “Save”
  4. Click the Beautify link

Now you have a copy of the source code you can work with! I usually save it to a local file at this point so that I can annotate it with comments.

There are probably simpler ways to do this with other javascript beautifiers, but I haven’t found any other ones that do as good of a job at deminifying code as this trick.

6 Comments

  1. Posted May 02, 2008 at | Permalink

    Interesting trick, glad I found it.

  2. Posted May 13, 2008 at | Permalink

    it’s all greek to me. but the friendfeed image reminded me, the friendfeed feed doesn’t display properly in wordpress.com. do you know of a trick to get it working? if you do, please share. thanks in advance! :D

  3. David
    Posted June 04, 2008 at | Permalink

    This how-to makes absolutely no sense. What do you mean by “install” this script? It’s Javascript…how do you install it? Second, that other web site does not present a [beautify] link anywhere in the window. So I have no idea what you are trying to tell people to do here. Can you please clarify?? Thanks.

  4. Posted June 05, 2008 at | Permalink

    @ David:

    Never heard of Greasemonkey?

  5. LoreZyra
    Posted July 08, 2008 at | Permalink

    humph… according to the premise and screenshots, this would have been a great tool….

    Even better if it actually worked…

    Looks like this script basically takes a source code and colors it… then using GreaseMonkey’s FF extention (with Beautify script installed) it passes this same code to another URL for parsing… Why not have a site that does both?????

    BTW, all I get when attempting to use this is:

    Warning: file_get_contents(http://o0t.de/nopaste/paste.php?f=pqzlue&download) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/www/sv02_20/html/javascript/index.php on line 12

  6. LoreZyra
    Posted July 08, 2008 at | Permalink

    Oh, for those of us that want to use something that works… check out:

    http://elfz.laacz.lv/beautify/

2 Trackbacks

  1. [...] How to Unminify Javascript Code [...]

  2. By WordPress Greasemonkey Competition on September 17, 2008 at

    [...] Un-minifying Javascript [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*