Table of Contents

Debugger.js

Firefox has a plugin called Firebug that is indespensible. It provides a debugging console that lets you echo out information by using numerous functions built into an object called console. For instance, you can execute console.log('hi') and the Firebug console will display "hi". It's a million times more powerful than this and if you aren't using it then you should get it, install it, and read the documentation for it now because it is friggin awesome.

The bad news, of course, is that it only works in Firefox. That's great when you're putting together your page, but what about when you need to debug something in Safari or IE? That's where Mootools Debugger script comes in. Simply include Debugger.js in your page and all the code that you have logging to firebug's console will now show up in Debugger. Note that if you include Debugger.js in your page and you have Firebug installed, you won't see it. Firebug is still way better than Debugger.js, so you'll really only use it for IE, Safari and other browsers.

If you're looking at this page in IE or Safari now, you've been seeing all the examples in this tutorial print out into Debugger.js's console already. For the following code examples, I'm going to call debug.method(), but when you use it, you'll use console.method(). If Firebug is present, your console calls will go to Firebug, if not, to Debugger.js's debug object.

Let me reiterate that all these examples call debug but that you would use console.

debug.create()

debug.create() shows the debugger window; if you include this script in your page (and you don't have Firebug present) this is called automatically. 

debug.create(); //show the debugger window
execute this code

debug.log() (i.e. console.log)

Strings 

debug.log('hi');//logs 'hi'
execute this code

Arrays 

debug.log($$('h3'));
//logs something like [[object HTMLHeadingElement],[object HTMLHeadingElement]]
execute this code

HTML objects 

debug.log($E('h3'));
//logs "<h3>" which is clickable
execute this code
debug.log({apple:'red',lemon:'yellow'});
//logs '{"apple":"red","lemon":"yellow"}'
execute this code

Firebug-style logging statements

Firebug's console/logging api let's you create strings using variable substitution. For example, this line: 

var x = "something";
debug.log("the value of x is: %s and the first paragraph is: %o", x, $E('p'));
execute this code

The resulting line in the console would be: 

the value of x is: something and the first paragraph is: <p>

Debugger.js seeks to emulate this style of logging, but it's much more simplistic. It will substitute the values in for the %* keys, but it doesn't pay any attention to which key you use. The point is to make your log statements work in either place. If you need that level of info, use Firebug.

debug.time, .timeEnd

Works just like Firebug's .time and .timeEnd. Pass in as an argument a name for the timer, when you call timeEnd (with the same name) the duration between the two calls is displayed: 

debug.time('example'); /*start the timer*/
debug.timeEnd.pass('example').delay(1000); /*end it*/
execute this code

Entering in commands in the console.