====== Debugger.js ====== [[http://getfirefox.com|Firefox]] has a plugin called [[http://getfirebug.com|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 ==== debug.log() (i.e. console.log) ==== **Strings** debug.log('hi');//logs 'hi' **Arrays** debug.log($$('h3')); //logs something like [[object HTMLHeadingElement],[object HTMLHeadingElement]] **HTML objects** debug.log($E('h3')); //logs "<h3>" which is clickable debug.log({apple:'red',lemon:'yellow'}); //logs '{"apple":"red","lemon":"yellow"}' ==== 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')); The resulting line in the console would be: the value of x is: something and the first paragraph is:

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*/ ==== Entering in commands in the console. ====