Quickly see Document and Window properties using Javascript

In my last post View dynamically generated HTML, I talked about how you can add a button to your Links toolbar in IE and link it to a snippet of Javascript code.

Here are a couple of snippets that I use to examine the current document properties and window properties. I have added them as "Show Doc Props" and "Show Win Props" buttons to my IE Links toolbar and they come very handy while debugging my web pages. These can also be used to look at all the different properties of document/window instance of any website that you visit:

Snippet for "Show Doc Props"
javascript:var dprop_=new Function("propName","try{return document[propName];}catch(err){return '<span style=color:red;>'+err.description+'</span>';}");var tbl="<table border='1' style='font-family:Tahoma;'>";for(var p in document)tbl+="<tr><td style='color:blue;'>"+p+"</td><td> "+dprop_([p])+"</td></tr>";tbl+="</table>";window.open("").document.write(tbl);


Snippet for "Show Win Props"
javascript:var wprop_=new Function("propName","try{return window[propName];}catch(err){return '<span style=color:red;>'+err.description+'</span>';}");var tbl="<table border='1' style='font-family:Tahoma;'>";for(var p in window)tbl+="<tr><td style='color:blue;'>"+p+"</td><td> "+wprop_([p])+"</td></tr>";tbl+="</table>";window.open("").document.write(tbl);

As you can see, this technique of linking code snippets to a button in your IE toolbar is a great way to access some general purpose Javascript utilities. One thing that I can think of is to have different set of snippets to automatically fill-in different form data. I understand that IE provides the abilitiy to save form data, but I do not like that feature plus it is not very flexible. For example, what if you want to use a different set of data based on the form or web page you are on? You could definitely use this technique for that purpose.

Hope you find this useful. Happy Scripting,


Sonny