Firebug and the Console API

Among the many Firefox extensions out there, there exists Firebug and it is good. It is truly an amazing piece of software. There is a CSS(cascading style sheets) viewer, so that when you inspect an element in the DOM(document object model), you can view all of the CSS attributes that apply to that element. Not only does it show you the applicable CSS rules, it breaks it down to the styles being used and to the styles which have been overwritten. Very nice. There are many other things it does, but one feature in particular that I don't think I would want to live without is the console API.

Console API

alert('performing mouseover') or alert(myvalue) is the first approach I took in order to get input on what was going on in the midst of my code. Then I wised up a little and made an debugging area in the HTML(hypertext markup language) where I would send those messages . Well Firebug kicks that up a notch with the console object. You can call one of several types of messages to write messages to the Firebug console: log(), info(), debug(), warn(), and error().

 1function dummyFunction(number) {
 2  if((number % 2) == 0)
 3    console.debug('even');
 4  else
 5    console.debug('odd');
 6
 7  try {
 8    var t = 1 / number;
 9  catch(e) {
10    console.error(e.toString());
11  }
12}

Now you have a way of getting feedback about what you are doing without resorting to the dreaded alert() statement. The power doesn't stop here. console.dir(myObj) will print out a metric-pony load's worth of information about an object in your console for you. If the object has an attribute, this will let you see what it is, and what values are stored in that attribute. Absolutely fabulous when you're not sure exactly what an object is, or what it does.

Units Tests NOT Be Damned

Along with writing messages to the Firebug console, you can also write tests. By using console.assert(), and a slew of other firebug assertions, you can start gaining a level of confidence in the code you write.

I just noticed the assertions today, so I haven't used any of this just yet. I imaging that one would create an HTML file, separate from all other pages on the site, and create the tests in there. If someone has done any assertion files, I would love to know your approach and any tips you may have.

The Best Thing of All

What could make this even better than it is right now? Well, the answer is Firebug lite Without it, the downside to using Firebug is that other browsers, like Safari, Opera, and Internet Explorer, won't know what do to with those commands and will just blow up in your face. Firebug lite adds that Console API functionality to the other browsers. By default, the Firebug lite console window stays hidden until you activate it. Once activated, all of you messages will be available to you. All the more reason to write assertions, since you can now check your code quickly against all of your browsers.

If you don't have this extension and you do JavasSript programming, or any other HTML coding really, then you need to get it right away and discover the all the other awesome aspects of Firebug.