lime icon

Phosphorus and Lime

A Developer's Broadsheet

This blog has been deprecated. Please visit my new blog at
JS: Firebug Lite
As a follow-up to my last post, I was poking around the Firebug site and discovered this: Firebug Lite. A version of Firebug for IE. Cool!

More info:


Javascript Logger
As every developer knows, one of the killer extensions for Firefox is Firebug. And I was using it for months (years?) before I discovered one of its coolest features: console.log. It's a simple method that allows you to send your own output to the Firebug console.

This was one of those little things that changed my life. What an improvement over the old alert function. I told all my friends, all co-workers. I was a console.log evangelist.

One problem -- the obvious one: Internet Explorer. It doesn't have Firebug. It doesn't know what a console object is. So if you want to use this, you have to figure out how get IE to ignore, else you get errors.

Anyway, that is what the logger class below does. It logs messages to the Firebug console. Its major feature is doing this transparently. You can also set the pop_interval value so that, in Firebug-less browsers, an alert message will pop up every one in a while dumping the complete log contents. (Probably could be a problem if it gets too long, but I'll worry about that in the future.)

Now, without further ado, the class:


Javascript Logger
Author: Tom at
License: LGPL License


var NBSP = ' ', DEBUG = 1, INFO = 2;
var Logger = Class.create({

/* Javascript Logger
There are probably better versions out there, but this is my own. Its
most significant feature is that it determines whether Firebug is loaded
or not and adjusts its output accordingly.

levelTag : ['', 'DEBUG', 'INFO'],
has_firebug : false,
Journal : [],
pop_interval : 5, // when firebug absent, how often we want to dump an alert
max_pop_length : 20, // when firebug absent, max length of items in pop-up window

initialize: function(level)
if ( level == null ) this.level == DEBUG;
this.has_firebug = this.is_firebug_installed();
this.debug("has_firebug:", this.has_firebug);

_log: function(lvl, msg)
if ( this.level < lvl ) return;
timestamp = '[' + + ']';
level = this.levelTag[lvl] + ' >>>';
this.log(timestamp + NBSP + level + NBSP + msg);

log: function(message)
if ( !this.has_firebug )
if ( !(this.Journal.length % this.pop_interval) )
if ( this.Journal.length > this.max_pop_length )
this.Journal.splice(0, Math.ceil(this.max_pop_length / 4))

debug: function()
var msg='';
for (i=0; i < arguments.length; i++) { msg+=arguments[i]+' '; }
this._log(DEBUG, msg);

info: function()
var msg='';
for (i=0; i < arguments.length; i++) { msg+=arguments[i]+' '; }
this._log(INFO, msg);

is_firebug_installed: function() { return ! eval('typeof(console)=="undefined"'); },
now: function() { D = new Date(); return D.toLocaleTimeString() + ':' + D.getMilliseconds().toString(); },
t: function(t0) { return ( ( new Date() ) - t0 ) / 1000; },
alert: function(msg) { alert(msg); }

GlobalLogger = new Logger(INFO);
function l() { GlobalLogger.debug($A(arguments).join(' ')); }
l("Logger loaded");

Logger = new Logger();
Logger.pop_interval = 3;
Logger.log('a log message');
Logger.debug('a debug message');'an info message');'if no firebug, we should put up an alert now');

This has been tested successfully on IE6 and, of course, Firefox. It does require the prototypejs library.