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 code using one of the following links:
- JSObjectBrowserSample.zip
- https://www.dropbox.com/s/0hu3pbofhqjg6qi/JSObjectBrowserSample.zip?dl=1
- https://www.dropbox.com/s/0hu3pbofhqjg6qi/JSObjectBrowserSample.zip?dl=0
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.
http://www.wagnerlive.com/Mark/Files/castleJSHelper.js http://www.wagnerlive.com/Mark/Files/castleJSObjectBrowser.js
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.
(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
This is long shot, but do you happen to have the files available for download? The links you have above don’t work anymore. Thanks!
I have updated the article download links to make the JSObjectBrowserSample.zip file available again. Thanks for the request.