JavaScript Object Browser Sample

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.

Advertisements

One thought on “JavaScript Object Browser Sample

  1. (Migrated Comments from my old blog)

    Feedback (Migrated)

    # JavaScript Object Browser Sample 12/24/2004 6:19 PM Kent J. Chen’s Weblog

    # re: JavaScript Object Browser Sample 1/16/2005 8:18 AM Joel Martinez
    wow … this needs to be a freakin’ browser extension :-D

    # JavaScript Object Browser 2/12/2005 4:07 PM Mark Wagner’s .NET C# Cogitation

    # re: JavaScript Object Browser Sample 2/13/2005 12:28 AM Hermann Klinke
    Oh god, I just love this.

    # re: JavaScript Object Browser Sample 6/24/2005 6:24 AM Ted
    Is there a way to have this info printed to another window for easier viewing, and to possibly keep the original content in the original window?
    Mark at 4/26/2007 2:22 PM

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s