'console' is undefined error for Internet Explorer

Laying the groundwork

It’s no secret that older browsers like IE aren't as well-equipped as their modern counterparts. The console object is a prime example, being widely used for debugging but often missing in these browsers.

Plugging the missing pieces

In the absence of console in IE, we can construct an imitation console that harmlessly absorbs all calls:

if (!window.console) {
    window.console = {
        log: function() {}, // "Hello, wall."
        warn: function() {}, // "Warning: Wall ahead."
        error: function() {}, // "Error: Wall still here."
        info: function() {}, // "FYI, wall."
        // ... keep going with other methods you use
    };
}


Digging deeper with polyfills

To provide more tailored fallbacks, we can scan for only the missing console methods and "polyfill" them:

(function(console) {
    var methods = ["log", "warn", "error", "info", "debug", "trace"];
    for (var i = 0; i < methods.length; i++) {
        if (!console[methods[i]]) {
            console[methods[i]] = function() {}; // "Method missing? Not on my watch!"
        }
    }
}(window.console = window.console || {}));


Going the extra mile

Once the groundwork is laid, let's delve into some advanced strategies for better handling and error-proofing console usage.

Manoeuvring around console methods

console.log isn't the only method that may trip up older versions of IE. Other console methods can also be undefined:

if (typeof console === "undefined" || typeof console.log === "undefined") {
    console = {
        log: function() {},    // "Logging"
        warn: function() {},   // "Warning,
        error: function() {},  // "Erroring?"
        // Include more methods as necessary.
    };
}


Calling in the cavalry: logging libraries

For more complex or versatile logging, you can use a logging library log4javascript as a sturdy fallback in lieu of console:

var log;
if (!window.console) {
    log = log4javascript.getDefaultLogger();
} else {
    log = console;
}


Harnessing HTML5 Boilerplate

HTML5 Boilerplate contains a tested snippet that you can use to ensure compatibility with older versions of IE in the famed js/plugins.js:

// Protect your JavaScript's dignity in browsers that lack a console.
(function() {
    var method;
    var silentFunction = function() {};  // "Yes, I'm here, but I won't make a sound."
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml',
        'error', 'exception', 'group', 'groupCollapsed', 'groupEnd',
        'info', 'log', 'markTimeline', 'profile', 'profileEnd',
        'table', 'time', 'timeEnd', 'timeline', 'timelineEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var numberOfMethods = methods.length;
    var console = (window.console = window.console || {});

    while (numberOfMethods--) {
        method = methods[numberOfMethods];
        
        // If console doesn't have the method, add it and let it silently nod at all calls.
        if (!console[method]) {
            console[method] = silentFunction;
        }
    }
}());


Script positioning for smooth sailing

Position your console fallback at the beginning to safeguard all console calls in your script:

<script src="path/to/console-polyfill.js"></script>
