Hallvord R. M. Steen

Script formatter user JS

Tuesday, 13. May 2008, 22:34:15

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

Dragonfly arrivingnice stack, Firebug

Comments

Darken # 13. May 2008, 23:06

Ah thanks.

fearphage # 14. May 2008, 03:13

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.

Andrew Gregory # 14. May 2008, 11:50

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.

fearphage # 14. May 2008, 13:13

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.

Maybe it's time to bring it back?

hallvors # 14. May 2008, 21:07

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?

fearphage # 14. May 2008, 21:42

Originally posted by hallvors:

Have you used Vital's script?

Yes

Originally posted by hallvors:

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

No but a good lithmus test is obfuscated code.

Andrew Gregory # 17. May 2008, 08:54

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(/\n\s*\n/mg,'\n');

hallvors # 19. May 2008, 11:31

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

fearphage # 24. May 2008, 13:24

I noticed the latest performance tweak and was wondering if there's a chance the same could be done for pretty printing of js. It would be convenient as native implementations are always faster.

hallvors # 24. May 2008, 19:35

I think it should happen automatically when Dragonfly is active.

fearphage # 3. June 2008, 17:43

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:

javascript:alert(uglyOneLineFunction)

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.

Andrew Gregory # 4. June 2008, 14:28

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.

hallvors # 14. August 2008, 13:10

Found one snippet the beautifier on http://elfz.laacz.lv/beautify/ (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.

fearphage # 15. August 2008, 12:27

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.