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.

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.

Recent Features

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    CSS Ellipsis Beginning of String

    I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to...

  • By
    Animated AJAX Record Deletion Using Dojo

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with Dojo JavaScript. The PHP - Content & Header The following snippet goes at the...

Discussion

  1. 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. 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!