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.
You can download my sample.
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.
- 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.
<SCRIPT language=javascript src="http://www.crsw.com/blogs/Mark/Files/castleJSHelper.js"></SCRIPT> <SCRIPT language=javascript src="http://www.crsw.com/blogs/Mark/Files/castleJSObjectBrowser.js"></SCRIPT>
These javascript files are available for download (above) so that you can reference these files on your server.
Below is the results of simply adding two script tags to make this available in this post. Click away! The sample starts below this line: