Script formatter user JS

The web is full of scripts that are "compressed" with all whitespace removed to make them download faster. Such scripts are hard to debug..

Here is a small user JavaScript which re-formats script source code to make those "compressed" files simpler to debug with Opera Dragonfly

Download User Javascript..

Note: this script is converted from PHP in a quick and messy way – apologies for any PHPisms, and for the variables that are still prefixed with a dollar sign. I've been using it for a while but I still find bugs and scripts that the formatter can not handle, so be prepared that there may still be some work to do.. Let's call it an alpha release 🙂

Update: two years later, the script now finds a home here


15 thoughts on “Script formatter user JS

  1. Not to belittle your work but we actually had this already (sort of) from a local here on myopera (Vital). Its based on the php script that I use (not created) for beautifying.

  2. This is certainly one of the things that I think Dragonfly needs internally, as it seems a bit wasteful having it running all the time, just in case it's needed for debugging. Doesn't Opera have an internal function->string pretty-printer Dragonfly could use?Thank you Hallvord, that's one thing scratched off my Dragonfly annoyances list.

  3. Originally posted by Andrew Gregory:

    Doesn't Opera have an internal function->string pretty-printer Dragonfly could use?

    No. This functionality was sacrificed for performance. :irked: Maybe it's time to bring it back?

  4. Originally posted by hallvors:

    Have you used Vital's script?

    YesOriginally posted by hallvors:

    Any idea how they compare in terms of correctness and performance?

    No but a good lithmus test is obfuscated code.

  5. fearphage: thanks, I was not aware of Vital's JS beautifier. Funny that they are both converted from PHP to JS and require emulating PHP stuff like in_array :)I've read through most of the script. Mine looks a little simpler but might of course fail in more cases. Have you used Vital's script? Any idea how they compare in terms of correctness and performance?

  6. I've used Hallvord's script a bit now (haven't tried Vital's script), and found I preferred two spaces instead of tabs for indentation, plus a little extra code to remove empty lines:

    e.element.text = $output.replace(/ns*n/mg,'n');
  7. Thanks for using it, let me know if you come across any scripts that breaks when they are wrapped ;)I never added anything to remove superfluous lines (or not add them in the first place) because I mostly just enabled it for debugging all-on-one-line code anyway 🙂

  8. Originally posted by hallvors:

    I think it should happen automatically when Dragonfly is active

    I would like it to be available all the time so i can use the following:


    and get pretty code like i used to do… Basically, I want the functionality back. Dragonfly can hopefully be used as leverage to pull it back.

  9. The important thing for me is the link between the error console and JS source code. Every JS error in the console should be clickable to go to the code in question (currently, not always). That code naturally needs to be readable, hence the pretty printers. I don't miss the Function.toString functionality and wouldn't mind opening Dragonfly to get to the nicely formatted source.It would be nice if Dragonfly could make accessible the unpacked result of packed JS – it must be somewhere, but I'm sure that might be a bit tricky. In fact, it might be an argument for the return of the nice Function.toString.

  10. Found one snippet the beautifier on (and Vital's equivalent) handles better than my more simplistic one:

    return /^w{8}-w{4}-w{4}-w{4}-w{12}$/.test(this)

    My parser is too low-level to understand that / after "return " starts a regexp and not a division. To tell them apart I would have to add some tokenising and knowledge of keywords I guess, so Vital's JS is a good alternative. Would be nice as a user JS for Dragonfly work. 🙂

  11. Originally posted by hallvors:

    Would be nice as a user JS for Dragonfly work.

    I propose that it should be configurable functionality in the same way as stacktraces are now. I hope this is an issue that you and other staff members can push for.

  12. (The code beautifier user JS is updated. Since I've now used it and fixed bugs in it for nearly a couple of years I think it's becoming fairly stable!)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s