How to Safely Use the JavaScript console Object (and Dynamically Enable/Disable Logging)

In the primordial days of the web, debugging JavaScript often meant using the alert() function to print information about what your code was doing. Thankfully we now have debuggers and, for developers who prefer logging, the console object which offers functions like console.log().

There’s a catch with the console object, however: it doesn’t always exist. More specifically, most browsers don’t provide a console object by default (Chrome being one exception). You usually need some kind of developer tool or extension running to provide a console object—Firebug or the ‘Developer Tools’ add-on for IE, for example. And without a console object, calls like console.log() result in a “console is not defined” error.

I came up with a solution to this on a recent project (although I highly doubt I was the first to do so). It basically involves creating a “dummy” console object that will be used if the real thing doesn’t exist, which prevents “undefined” errors. With the flip of a switch, however, you can “turn on” logging and start using the actual console if it exists.

It’s pretty simple to use. First, make sure the following gets run before any code tries to call the console functions:

// Create object that will be used for 'myapp' namespace if it doesn't already exist.
if( myapp === undefined ) {
    var myapp = {};
}

// Create an object with functions that mimic the window.console object made
// available by tools like Firebug or the "Dev Tools" add-on in IE8+
myapp.dummyConsole = {
    assert : function(){},
    log : function(){},
    warn : function(){},
    error : function(){},
    debug : function(){},
    dir : function(){},
    info : function(){}
};

// Throughout our app we'll make console/logging calls by using the myapp.console
// object. Example: myapp.console.debug("blerg!"). By default, the myapp.console
// object should use the "dummy" console that doesn't do anything.
myapp.console = myapp.dummyConsole;

// This function can be used to switch the myapp.console variable to use the
// real window.console object. Note that it does a safety check to ensure that
// window.console actually exists (it won't in browsers not running Firebug or
// the IE dev tools).
myapp.enableConsoleOutput = function(enable) {
    // Don't enable the console unless it actually exists
    if (enable && window.console !== undefined) {
        myapp.console = window.console;
    } else {
        myapp.console = myapp.dummyConsole;
    }
};

I like putting this in a file called console.js and making sure it appears in one of the first

Lastly, if your HTML doc is generated dynamically (e.g., JSP, PHP, etc.) you could add some server-side logic that only writes this statement if a special “enable logging” flag exists in the URL parameters. I usually take this approach because it allows you to A) see any logging statements that execute during the page’s “startup” phase (i.e., before you have had time to run the statement in the Firebug console) and B) still gives you the option of running Firebug with logging disabled.

Tags: javascript