Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

MooTools Window Object Dumping

By  on  

Ever want to see all of the information stored within the window property of your browser? Here's your chance.

View Demo

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.

View Demo

Fun! You could opt to just log all of this to Firebug's console but the above works in all browsers.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

Incredible Demos

  • By
    MooTools Fun with Fx.Shake

    Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter...

  • By
    CSS content and attr

    CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily.  There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content.  You saw a...

Discussion

  1. Timothy

    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

  2. Botanicus

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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!