slayeroffice - web experiments gone horribly awry

04.11.2004 - Javascript Object Tree Favelet

Frequently I am asked by co-workers and friends to help debug javascript. Generally I am completely unfamiliar with the project they're working on and have never seen the troubling script, and nine times out of ten the script is referenced externally, or there are several externally referenced scripts. This means that I have to view the source of the document, copy the src attribute of the script, paste it into my browser and then run through the script or scripts to see if I can help them figure out what the problem could be.

That's gotten old so I thought I'd come up with something to get at the scripts a bit faster -- I give you the Javascript Object Tree favelet.

This will overlay your current document with a DIV element containing a collapsed list of all the javascript object types currently referenced by the page, from functions to strings to booleans and all else that falls between. Clicking the object type - for example "function", will expand a new list with all of the function names. Clicking one of the function names will expand into the function's body.

You know how a tree view works, so I don't know why I'm explaining it to you. This page isn't a very good example of what the favelet does as it's fairly light on javascript...something like Missile Command would be better. Also, this current version only works in Mozilla and Firefox - an MSIE version may be coming shortly depending on the amount of hoops I'll have to jump through to get it working.

Neat work, man. It would be cool if you'd add support for classes, by which I mean you allow people to traverse the prototype object of a function as well.
Posted by Mark Wubben on April 12, 2004 @ 10:52 am

Comments have been closed for this post.