How many apps still have alert("ACHTUNG") lines in them? How many times you've written something like

function trace(message) {
  document.getElementById("traceContainer").innerHTML += message + "<br />";
} 

I know I have, and I'm not enjoying repeating this all over. This post is about Firebug Lite, an easily embeddable cross browser javascript instrumentation toolkit. 

Adding Firebug Lite to the application

The core of Firebug Lite is the console tab, which pops up at the bottom of the screen whenever you need it, much like it's bigger brother - Firebug firefox extension.

What do you need to get this console in your application? First, download the firebug lite, unpack and add include the firebug.js script file. Refresh the page and press F12 key to toggle the console (it doesn't open automatically by default). The javascript file is 20kb, and you only need to include it when you're in trouble. For the sunny days, there is a much lighter stub version, so that your log statements don't throw errors.

Firebug adds global console object that exposes logging functionality. In the screen above, I use console.log("Hello, I'm firebug lite!"); to get the text on the console. There's more than that, of course.

String Formatting

Output can be formatted using a C printf like syntax:

console.log("Hello, I'm %s %s beta %i !", "Firebug", "Lite", "1");

Different Log Levels and Assertions

There are three log levels, providing different message formatting. I couldn't find how to set a threshold though - it would certainly be nice to have.

console.info("info level");
console.warn("warn level");
console.error("error level");

console.assert will check a condition, and both write an error and throw an exception, which is also nicely caught in the middle and logged, but not swallowed:

console.assert(1 > 2, "assertion failed");

Grouping

Dumping all information in a single stream is not the best way to ensure readability, and here's where firebug really starts to stand out from home grown log code:

console.group("Trying to do complex stuff");
console.log("Going strong");
console.info("OK so far..");
console.warn("it's starting to get worse...");
console.error("now we're in trouble");
console.groupEnd();

console.log("but life goes on");

Object Inspection

It's not just about outputing pretty messages. To capture state of the object:

var obj = {
  property: "property value",
  another_property: "different value",
  myfunction: function() { alert("hi"); }
} 

console.info("some object received:"); 
console.dir(obj);

it's also possible to inspect html elements using dirxml():

<h1 id="heading"><a href="http://getfirebug.com">Firebug lite demo</a></h1>
<script type="text/javascript">
  console.dirxml(document.getElementById("heading"));
</script>

Timers

An easy way to profile an operation (much more powerful profiling support is available in firefox-only version)

console.time("loop");
for(var i=0; i<100000; ++i) {
  var x = new Object();
}
console.timeEnd("loop");

Command Line

There's no need to foresee all things that could possibly go wrong. Use the command line to issue the same commands at real time. Let's say I need to expect the state of 'obj' object again: open console (F12), and type console.dir(obj):

Not sure what's up with "undefined", but it's still very slick.

What, There's more?

I have deliberately used Internet Explorer to demonstrate the "worst case" (which is impressive enough) you could get with a library that started as a firefox extension, with no installation whatsoever. All of the features above work perfectly fine and suitable even for internet explorer only application; you can use it from any machine, in debug or production, from dev laptop or client's PC.

The best part is that when you have a firefox with firebug installed, you can view the same page and see a more detailed picture with rich, interactive controls.

Links:
Firebug Firefox extension (a major 1.0 upgrade was released several days ago)
Firebug Lite
Firebug Console API (not everything works with firebug lite)