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.

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

Commenter Avatar April 23 / #
Timothy says:

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

Commenter Avatar April 27 / #
Botanicus says:

Hey David, that’s pretty cool, I like it!

Be Heard!

I want to hear what you have to say! Share your comments and questions below.

Name*:
Email*:
Website:  


© David Walsh 2007-2010. Contact David Walsh. Powered by the remarkable MooTools javascript framework.