Javascript best practice: handling Firebug-specific code

Question

Firebug is certainly a wonderful tool for javascript debugging; I use console.log() extensively.

I wanted to know if I can leave the Firebug-specific code in production. What's the best practice? Commenting the debug code?

Answer 1

Hi ...

I have had many a headache caused by this.

I use console.log() a lot, and until recently, found that it would cause the entire JS code to fail in versions of FF not using firebug.

I usually run a find before going live, and commenting it out.

D

Answer 2

If you leave console.log() calls in your production code, then people visiting the site using Internet Explorer will have JavaScript errors. If those people have extra debugging tools configured, then they will see nasty dialog boxes or popups.

A quick search revealed this thread discussing methods to detect if the Firebug console exists: http://www.nabble.com/Re:-detect-firebug-existance-td19610337.html

Answer 3

been bitten by this before. Ideally all the console.log statements need to be removed before production, but this is error prone and developers invariably forget or only test in FF + Firebug.

A possible solution is to create a dummy console object if one isn't already defined.

if( typeof window.console == 'undefined'){
    window.console = {
        log:function(){}
    };
}

One word of caution: It used to be the case for Safari on 10.4 that any call to console.log would throw a security exception as the console object is a reserved object used in the Mac OS Dashboard widgets. Not sure this is the case anymore, will check tonight.

Answer 4

Personally I modified my compressor a while ago to strip out console references pre-compress. A few minutes adding a regex there saves a lifetime of hassle.

Answer 5

Just thought I would add a really good tip for any js debugging.... use the keyword "debugger", and its like a breakpoint in the code, firebug detects it also MSIE (if you have visual studio) detects it and as I say its a breakpoint.

Not many people seem to know about this but I have found it invaluble... also if there isnt a debugger installed on the machine that is running the code, nothing happens and the code goes through fine. Although I wouldn't advise leaving them in there.

Answer 6

Some compressors will strip out any line prefixed by ;;; (which is a legal sequence to have, being three empty statements.) This way you're not strictly limited to console references (i.e. you could do some calculations and then console.log() the result at the end, and the compressor can strip all of them out.) I use JavaScript::Minifier for this.

Answer 7

I use this in OOP Javascript, making my own wrapper for log that checks that firebug exists:

myclass.prototype.log = function()
{ 
    if( typeof window.console != 'undefined' )
    {
        console.log.apply( null, arguments ); 
    }
}

Just call:

this.log( arg1, arg2, ...)

Answer 8

Just a reminder that IE Dev Tool does not support apply() on console.log.

Calling console.log.apply() will raise exception in IE8 when dev tool is active.

Answer 9

You can try JavaScript Debug, it is s simple wrapper for console.log http://benalman.com/projects/javascript-debug-console-log/