Firebug JavaScript Logging Gotcha

Posted: March 13th, 2012 | Author: | Filed under: JavaScript, jQuery | 2 Comments »

I’ve been doing a lot of Javascript / jQuery work over the last week and have been using Firebug’s handy-dandy console.log() debugging method. Thanks to the awesomeness that is Firebug the era of debugging one’s JavaScript code with irritating alert() messages is over. One gotcha that I’ve fallen for more than once this past week is that leaving console.log() calls in your code when you aren’t running Firebug will cause JavaScript errors. A simple work-around for this problem is to have JavaScript test for the existence of console before attempting to log the message. I’m doing this in the code sample below in a function that I’ve named consoleLog().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function booya(){
 
    // this will make IE cry like a sad, sad baby when Firebug is not present
    console.log('booya');
 
    // this will appease the demon child
    consoleLog('method booya() in the house');
}
 
function consoleLog(message){
    if(window.console){
        console.log(message);
    }
}

Ideally one should not be leaving debug code in their completed work, but I make an exception in cases where the debugging code serves as a code comment that may be helpful to other developers.

You can read more about Firebug and Logging here.


2 Comments on “Firebug JavaScript Logging Gotcha”

  1. 1 Dan G. Switzer, II said at 1:34 pm on March 13th, 2012:

    Why not just use:

    (function (w){
    if( !w.console ){
    w.console = {log: function (){}};
    }
    })(window || {});

    If console.log() doesn’t exist, then errors won’t be throw. You can obviously reduce this to a single line, but I was trying to maintain some readability.

  2. 2 Christopher Vigliotti said at 1:58 pm on March 20th, 2012:

    I am going to use that. Thanks, Dan!


Leave a Reply