FireBug Console Emulator

FireBug is the most powerful debugging tool available to web application developers. There are a myriad of well exposed features, such as break points, stack traces, HTML editing, network monitoring, etc. However, there is another powerful feature that is often overlooked; FireBug adds an object, console, to the JavaScript window, which allows the developer to log various actions in their code. But like the rest of FireBug, this feature is only available when running FireFox with FireBug enabled, so it doesnt help debug in other browsers, and in-fact referencing the console object will throw errors in other browsers.

At very least, a minimalist developer should wrap any calls to console with a getter method, so that no exceptions are thrown in other browsers:

Example 1: Wrapping Console

var mes_getConsole = function() {
    if (window.console && window.console.firebug) {
        return window.console;
    }
    else {
        return {
            error: function() {},
            debug: function() {},
            infor: function() {},
            log: function() {},
            warn: function() {}
            // any other console functions you using in your code
        };
    }
};

However, a better solution is emulating as many features as possible from the FireBug console in other browsers using JavaScript. FireBug Lite, by the same group that developed FireBug, is a tool to emulate as much of FireBug as possible in JavaScript. However, I was not completely happy with that solution, as it API is different from the console API, but it inspired writing Console.js, which also emulates most of the features of the FireBug console, directly in JavaScript (with less code by leveraging "Library.js"), whilst still deferring to FireBug console when it is available. If FireBug is unavailable, "console.js" opens a new window and prints log statements therein. The following functions have been implemented:

  • assert
  • count
  • debug
  • dir
  • error
  • info
  • log
  • time
  • timeEnd
  • warn

The following functions are slated to be implemented:

  • dirxml
  • group
  • groupEnd

The following functions will probably never be implemented, as they will require interfacing directly with the browser:

  • profile
  • profileEnd
  • trace

The biggest difference between the FireBug console version of these functions and "console.js" is that when using FireBug console, the utility determines filename and line number for the developer, but the JavaScript versions require that the developer explicitly provide the filename and line number as the last two parameters. This can be tedious to maintain, because every time code is moved all the line numbers need to be updated, however, it does not affect the FireBug console logging as the last two parameters will simply be ignored. Another difference is that the JavaScript version has a better implementation of string substitutions. The FireBug console replaces the first substitution, no matter what type, with the first parameter after the message parameters, whereas the JavaScript version respects the object type, so only a string will be used to replace %s. Lastly, in the JavaScript version, the logging time is always printed.

Here is an example of how one might print an info statement to the console:

Example 2: Using Console.js

Core.getConsole().info(Test Log %i %s, s1, 1, test_firebugConsoleEmulator.html, 95);

In the JavaScript version, this will print the info statement, "(i) @datetime Test Log 1 s1; test_firebugConsoleEmulator.html 95". In the FireBug console you will only see the following, "(i) Test Log s1 1 test_firebugConsoleEmulator.html 95". The only glaring difference, is the improperly way FireBug console handles string replacement, so the onus will be on the developer to be mindful of this, at least until FireBug fixes theirs.

The "console.js" requires Libary to work properly and has been added to Build.xml. Here is a test page illustrating the implemented methods. I will let you all know when I get around to implementing the remaining methods. If you have any ideas and/or improvements, please leave a comment.