2012-02: Updated for JSLint compatibility

console.log()  is the best friend of every Javascript junkie. However, the lack of it isn’t. console.log() function is only available in Webkit based browsers and with Firebug in Firefox. It’s the infamous situation that someone leaves console.log() to Javascript code, doesn’t notice its presence, commits the file and suddenly all Javascript on the production server stops working for Internet Explorer users….

To tackle the lack of console.log() problem there are several approaches.

1. Use dummy placeholder if console is missing

This snippet wraps console.log (need to repeat for console.error etc.):

    // http://opensourcehacker.com/2011/03/15/everyone-loves-and-hates-console-log/
    // Ignore console on platforms where it is not available
    if (typeof(window.console) == "undefined") { console = {}; console.log = console.warn = console.error = function(a) {}; }

Pros

• Easy

Cons

• Need to add to every Javascript file
• Messes with global namespace

2. Use module specific log function

This makes your code little bit ugly, more Java like. Each Javascript module declares their own log() function which checks the existence of console.log() and outputs there if it’s present.

mfabrik.log =function(x) {
 if(console.log) {
 console.log(x);
 }
}

mfabrik.log("My log messages")

Pros

• Easy to hook other logg
• You can disable all logging output with one if

Cons

• Not as natural to write as console.log()
• Need to add to every Javascript module

3. Preprocess Javascript files

Plone (Kukit / KSS) uses this approach. All debug Javascript is hidden behind conditional comments and it is filtered out when JS files are bundled for the production deployment. (The preprocessing code is here in Python for those who are interested in it).

if (_USE_BASE2) {
 // Base2 legacy version: matchAll has to be used
 // Base2 recent version: querySelectorAll has to be used
 var _USE_BASE2_LEGACY = (typeof(base2.DOM.Document.querySelectorAll) == 'undefined');
 if (! _USE_BASE2_LEGACY) {
 ;;;     kukit.log('Using cssQuery from base2.');

Pros

• Makes production Javascript files lighter
• Make production Javascript files more professional – you do not deliver logging statements indented for internal purposes for your site visitors

Cons

• Complex – preprocessing is required

4. Commit hooks

You can use Subversion and Git commit hooks to check that committed JS files do not contain console.log. For example, Plone repositories do this for the Python statement  import pdb ; pdb.set_trace() (enforce pdb breakpoint).

Pros

• Very robust approach – you cannot create code with console.log()

Cons

• Prevents also legitimate use of console.log()
• Github, for example, lacks possibility to push client-side commit hooks to the repository cloners. This means that every developer must manually install commit hooks themselves. Everything manual you need to do makes the process error prone.

5. Other approaches?

Please tell us!

 Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+