Note: This is a repost from my old blog:
http://blogs.crsw.com/mark/articles/652.aspx

Below is a small JavaScript application that allows you to browse through various objects on the DOM as well as JavaScript variables.  I wrote this in an attempt to better understand the differences between various web browsers, specifically Internet Explorer, Netscape, and Firefox.

Downloads:

– You can download my sample.

Demo:

– Click here to view the demo page. (no longer active)

You will find a top level window object with all its immediate children located blow.  Links are available on child objects where appropriate.  This is 100% driven by looking at each object property generically, meaning, nothing is hard-coded.  This allows any of your custom JavaScript variables (in a Netscape browser its even better) to be viewed.

Areas I found of particular interest:

• the windows.document node of the tree.
• functions will appear with a function link.  Clicking on this link will reveal the JavaScript for that function.  My demo below will show the javascript by drilling into (clicking) on the window.document.onreadystatechange node.
• the window.top.document.scripts link will list all the script tags, and the associated script if the actual script is embedded within the document.

I hope to improve and use this when debugging scripts.  Again, by adding two small links to javascript (via script tags) this becomes available on any page I like.

These javascript files are available for download (above) so that you can reference these files on your own server.

Below is a link to the demo, but FIRST, the remember to look at the root window node in the tree.  This will expand to show the context of the child items in the tree view.  For example, if you click on the document node, the root node will change from window to window.document, and the child nodes will change to reflect the child objects for the document node.  Additionally, the window portion of the root node can be clicked to return to the root window context.