MooTools Window Object Dumping
Written by David Walsh on Wednesday, April 22, 2009
This article may feature code that is no longer best practice in MooTools.
Click here to learn what has changed to make your code framework-compatible.
Click here to learn what has changed to make your code framework-compatible.
Ever want to see all of the information stored within the window property of your browser? Here’s your chance.
The XHTML
<div id="console"></div>
We need a wrapper DIV that we’ll consider a console.
The CSS
#console pre { font-family:Courier; font-size:11px; background:#000; color:lightgreen; margin:0 0 20px 0; padding:10px; }
#console h3 { color:navy; padding:3px 0; }
I like making this look like a command-line console.
The MooTools Javascript
window.addEvent('domready',function() {
new Hash(window).each(function(value,property) {
new Element('h3',{ text: property }).inject('console');
new Element('pre',{ text: value }).inject('console');
});
});
Depending on what you have loaded into the page as a javascript framework, the amount stored within the window object will vary.
Fun! You could opt to just log all of this to Firebug’s console but the above works in all browsers.
Epic Discussion
Be Heard!
I want to hear what you have to say! Share your comments and questions below.
This is really helpful. I find myself doing something similar all the time. But usually I am console.log-ing JSON.encode(window) which does not look very nice
Hey David, that’s pretty cool, I like it!