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
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • 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...

Incredible Demos

  • By
    CSS Custom Cursors

    Remember the Web 1.0 days where you had to customize your site in every way possible?  You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor.  CometCursor let you create and use loads of custom cursors for...

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

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!