For the people who working with JavaScript, logging is very important for debugging. Before I start using Firebug plug-in for Firefox I used alert function. It works in all browsers, and it’s quickly to use.

But for big application where you working with kilobytes of JavaScript code it’s not the best option, because you have to click on “OK” button every time when see this window, and if it one or two times it’s not a problem, but anyway it’s annoying.

But Firebug has a great number of methods for logging it’s
console.log
console.debug
console.info
console.warn
……

All this methods provide you with logging messages in Firebug console, but with different icons. But anyway in my opinion the most popular is console.log

If you want to test your application in browsers different from Firefox, your will have error message, because console.log is not define, so the best solution is create wrapper for JavaScript logging.
You can just create a method for this purpose, but I like jQuery and prefer to create plugin for jQuery.

Creating jQuery plug-in for logging. jQuery.log()

jQuery it’s a great library and allow a lot of stuffs, and one of the most important feature is creating plug-in.
All plug-in in jQuery have pattern it’s :
 

(function($) {
    // your plug-in code here
})(jQuery);

This patterns allow you to user $ for accessing jQuery inside of plug-in and help to hide some internal methods and properties because of closure.

I want to access my logging plug-in this way

$.log('my message');

The code for jQuery log plug-in is below

(function($) {
    $.log =
    {
        log: function(message) {
            //if('console' in window && 'log' in window.console)
            if (typeof window.console != 'undefined' && typeof window.console.log != 'undefined') {
                console.log(message);
            }
            else {
                // do nothing
                //alert('console is not supported: ' + message);
            }
        },
        info : function(message) {
            // todo
        }
    }
})(jQuery);

Inside of plug-in I check if the browser supports console, because if this is old version of Internet explorer, or if in Firefox you close Firebug plug-in console will be undefined. There is at least two types of checking if console is defined, the first is check if it inside of window, and the second, check if it is not undefined, I prefer second.

I put just console.log() method inside of my logging method, but if you need to support more browsers, for example Opera… you can add more code in this method.

And it’s all that you need. Now you can save this file as

and attach it to your project.

Working with firebug console is very easy and increase productivity, because Firebug console provide you with easy to use logging methods. But when you close Firebug you can get error “console is not defined”. It’s because console object exists only when Firebug is open.

The solution of this problem can be very easy:

• Open Firebug and “console not defined” error will not appear
• Use some wrappers for console.log object, for example jQuery.log() – logging plugin for Firebug console and jQuery
• Check if console object exists and defined

Firebug console.log for Internet Explorer

Internet explorer 8 also supports console object and all the methods from Firebug like console.log, console.error, console.info…. But unlike Firefox console object exists and defined in Internet explorer all the time. It does not depend on Developer toolbar open or closed.

How to check if console object exists

I believe the best option avoid error “console is not defined” is use some wrapper class. But for quick fixes you can use code to check if console object exists in browser. I know at least two solutions how to check if console defined:

• The first is to check if console object belongs to window object
• And the second is to check if console is ‘undefined‘

For the first approach I would recommend this code

if('console' in window && 'log' in window.console)
{
    // code using console.log here
}

For the second approach – this code:

if(typeof window.console != 'undefined'
    && typeof window.console.log != 'undefined')
{
    // code using console.log here
}

Both works fine in all types of browsers.