Grow your CSS skills. Land your dream job.

Last updated on:

Error-Free Console Logging

var Fb = {}; //An empty object literal for holding the function
Fb.log = function(obj, consoleMethod) {
       if (window.console && window.console.firebug && window.console.firebug.replace(/^\s\s*/, '').replace(/\s\s*$/, '') !== '') {
               if (typeof consoleMethod === "string" && typeof console[consoleMethod] === "function") {
                       console[consoleMethod](obj);
               } else {
                       console.log(obj);
               }
       }
}

If you leave console.log, console.info, etc messages in your JavaScript code and open the page in browser like IE then it may halt the page loading completely saying that 'console not defined' especially if your user uses a non IE8 browser.

This code snippet will allow you to leave the logging message as such in your code if you wish and your page will render properly in IE or any other browser that does not support the console messages.

Usage

Fb.log("This will be logged");

Fb.log("This will be displayed in console as info", "info");

The FB.log function accepts two parameters the first one is the "item" that you want to display in the firebug console and the second one is the firebug method that you want to use for the logging, like info, error, etc. If you omit the second parameter the result will be equivalent to console.log()

Simple log-only way

function ltc(what) {
       try {
               console.log(what);
       }
       catch (e) {}
       finally {
               return;
       }
}
ltc("message");

Comments

  1. Or (at the top of your code) you could just overwrite console.log() entirely if it doesn’t exist with an empty function.

    This removes the evaluation of the condition on every call, and keeps the function call uniform to other applications. New developers to the project will immediately realize what console.log() is for, unlike possible confusion that may arise from Fb.log().

    • Hi Benjamin,

      1. The approach you’ve mentioned will work if someone uses only console.log from within the JS.

      The coders may use every logging functions supported by Firebug like info, error, etc

      In such a situation this may be difficult.

      2. I have used a custom object literal just because this is a custom function and thought of avoiding tinkering with Firebug’s console object.

  2. Erik Lundmark
    Permalink to comment#

    Thanks!

    I missed rownumbers though, so I modified this a little and added that, together with “support” for console.count & console.time|timeEnd

    To show an error, you’d do this, where 55 is your files row number.

    Q.log(55, "something went wrong!!", "error");

    And a simple “info” would be this:

    Q.log(77, $("#mySelector"), "info");

    And to count ( ref: http://bit.ly/d5QdJi ) write this:

    Q.log(99, "count", "info");

    To time events you only need 2 parameters, a unique number/string and the words “time” & “timeEnd”.

    Q.log(1, "time");

    So to stop this timer you use:

    Q.log(1, "timeEnd");
    /* A fork of http://css-tricks.com/snippets/javascript/error-free-firebug-logging/ */
    // Q.log(84, "count", "info"); -> initial number would your rownumber, which is the whole idea here
    // Q.log(77, $("#div"), "info");
    // Q.log(99, "something happened!!!", "error");
    // Q.log(1, "time"); -> Q.log(1, "timeEnd"); -> 1 can also be a string, but keep it equal and unique
    var Q = {};
    Q.log = function( rowNum, obj, consoleMethod ) {
        if ( window.console && window.console.firebug && window.console.firebug.replace(/^\s\s*/, '').replace(/\s\s*$/, '' ) !== '') {
            if ( typeof consoleMethod === "string" && typeof console[consoleMethod] === "function" ) {
                if ( typeof obj === "string" && obj === "count" ) {
                    console.count("Row: " + rowNum + " | Counter ");
                } else {
                    console[consoleMethod]("Row: " + rowNum + " ", obj);
                }
            } else if ( typeof obj === "string" && obj === "time" ) {
                console.time("Profile " + rowNum);
            } else if ( typeof obj === "string" && obj === "timeEnd" ) {
                console.timeEnd("Profile " + rowNum);
            } else {
                console.log(obj);
            }
        }
    }
  3. Erik Lundmark
    Permalink to comment#

    Sorry for the multiple comments, but I thought this could come to some use…

    If all you want is to avoid the error thrown in Firefox, this should work just fine:

    var hasConsole = window.console != undefined ? true : false;
    ifConsole && console.info("Console Info Test");
    /*
        First, declare ifConsole -> is it present?
        Then prepend your console.[function] line with 'ifConsole && '
    */
  4. Simon Davies
    Permalink to comment#

    I was wondering if there is a better way in which to handel this or is this code still good today?

  5. Permalink to comment#

    There is a way to keep it low, it uses javascript’s features to safely wrap console.loggings
    –> window.console && console.log(“This single line execution won’t disappoint you !!!”);

  6. Be careful: the window.console.firebug was removed at firebug 1.9.0 (See in https://getfirebug.com/wiki/index.php/Console_API#Note and http://code.google.com/p/fbug/issues/detail?id=4772.

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".