Creating a wrapper namespace for the FireBug console.log function for IE and other browsers

Most web application/AJAX developers these days pretty much live within the confines of FireFox + Firebug as their environment of choice. It is a really powerful combination that allows you to debug and troubleshoot all sorts of javascript errors. Unfortunately, other browsers are unaware of it and calls to the console.log function simply do not work. More than that, they cause a fatal exception (if console.log is undefined) and javascript stops working, period.

One of the perils I have found is that sometimes, you can forget to take out a console.log somewhere, which sneaks its way into a customer facing/production environment. It can be at a place that’s not immediately noticeable – some obscure loop / if statement and you’d never know it… until somebody reports they can’t buy anything! So I wrote a little wrapper for it which will take care of any console.log calls and obtuse the ill effects on other browsers.

var C = {
    // console wrapper
    debug: true, // global debug on|off
    quietDismiss: false, // may want to just drop, or alert instead
    log: function() {
        if (!C.debug) return false;

        if (typeof console == 'object' && typeof console.log != "undefined")
            try {
                console.log.apply(this, arguments); // safari's console.log can't accept scope...
            } catch(e) {
                // so we loop instead.
                for (var i = 0, l = arguments.length; i < l; i++)
                    console.log(arguments[i]);
            }
        else {
            if (!C.quietDismiss) {
                var result = "";
                for (var i = 0, l = arguments.length; i < l; i++)
                    result += arguments[i] + " ("+typeof arguments[i]+") ";

                alert(result);
            }
        }
    }
} // end console wrapper.

// example data and object
var foo = "foo", bar = document.getElementById("divImage");
C.log(foo, bar);

The console.log itself can be used with an unlimited number of arguments (to save you from outputting console.log(var1); console.log(var2); and so forth). Using the "C" namespace (name it what you like) instead of "console" will have the preserved functionality / results within FireFox, whereas IE users can either see an alert popup dialogue or nothing at all (if C.quietDismiss = true).

To disable the alerts in IE, do
C.quietDimiss = true;
To disable debug completley:
C.debug = false;

I hope somebody finds this useful...
*update* thanks to divide by zero for the improvement - in this post.

*update again* this is a fix from the previous update, seems that safari's console cannot accept scoping through apply so I added a try {} catch {} block where it reverts to the old loop.

tags , , , , ,

Oct 6th '08 javascript 1 Comment

1 Comment to Creating a wrapper namespace for the FireBug console.log function for IE and other browsers

[...] Hier habe ich ein kleines Script gefunden, was überprüft, ob console definiert ist und wenn nicht, dann wird stattdessen ein Javascript-alert mit der logging-Ausgabe gemacht. Weil dies auf die Dauer aber auch nerven kann, kann man den alert über eine Variable einfach wieder abschalten. [...]

Leave a comment

You must be logged in to post a comment.



What is this?


follow me on twitter


Software