Monday, March 27th, 2006

Growing a Javascript Tree

Category: JavaScript, Utility

<>p> When debugging your Ajax (or other Javascript) applications, you can never have too much information. Sometimes, it helps to have things all laid out there before you can really see the issue at hand. This handy little script can help you get a better idea of what the Javascript on your page is really like.

The Javascript ObjectTree Favelet superimposes the current Javascript landscape of the page you’re viewing and is as simple as clicking a link and calling a function.

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.

So, what’s the best part of the script, you ask? Well, maybe the fact that it’s not a script at all – it’s actually a bookmarklet, making it possible for you to use it on any page you visit. All you need to do is visit their page and all the link at the bottom to your toolbar or bookmarks list. It’s that easy.



Related Content:

Posted by Chris Cornutt at 6:31 pm
9 Comments

+++--
3.3 rating from 34 votes

9 Comments »

Comments feed TrackBack URI

Admittedly, it’s not as spit-and-polished, but I did something quite like this over a year ago:

http://www.arantius.com/article/enumerate+any+javascript+object

Comment by Arantius — March 27, 2006

Doesn’t seem to work with gmail

Comment by sat — March 27, 2006

Just use FireBug:

http://www.joehewitt.com/software/firebug/

Comment by Bob Weston — March 27, 2006

Firebug is nice for inspecting details of certain elements and javascript related properties associated with that element – this one’ good for showing you the actual code that is loaded, and any variables nad objects including their values etc…
Nice addition to any web-dev’s ‘toolkit’.

Comment by Ravn Revheim — March 28, 2006

Mozilla only… :(

Comment by Marty — March 28, 2006

I also wrote something similar but in a object->properties and object->methods

Check it out here:
http://www.cableaz.com/print_r.php

Comment by Jason Patterson — March 28, 2006

Firebug is nice for inspecting details of certain elements and javascript related properties associated with that element – this one’ good for showing you the actual code that is loaded, and any variables nad objects including their values etc…
Nice addition to any web-dev’s ‘toolkit’.

Comment by Tom in Cala Dor Palma de Mallorca — October 1, 2006

Firefox isnt it?

Comment by Flowers — December 17, 2006

Good site I found … Plan on coming back later.

Comment by shadows — January 19, 2007

Leave a comment

You must be logged in to post a comment.