// Internet Duct Tape

How to Unminify Javascript Code

Posted in Firefox and Greasemonkey, Technology by engtech on May 02, 2008

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.

9 Responses

Subscribe to comments with RSS.

  1. Colin Devroe said, on May 02, 2008 at 9:05 pm

    Interesting trick, glad I found it.

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

  3. Netty Gritty said, on May 13, 2008 at 6:32 am

    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

  4. David said, on June 04, 2008 at 10:22 pm

    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.

  5. engtech said, on June 05, 2008 at 10:17 am

    @ David:

    Never heard of Greasemonkey?

  6. LoreZyra said, on July 08, 2008 at 10:09 am

    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

  7. LoreZyra said, on July 08, 2008 at 10:19 am

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

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

  8. WordPress Greasemonkey Competition said, on September 17, 2008 at 10:36 pm

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

  9. Satya Prakash said, on January 27, 2010 at 12:02 am

    Beautify link is missing from there. It looks they have changed the site design


Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 281 other followers

%d bloggers like this: