Quick Tip: Console.log Issues in IE (IE8 & IE9)

Me and team has already spent lot of restless nights and moments in frustration and believe me, do read it out unless you already know what this tip is about, it can save you some serious amount of  time.

Tom – The great Tester: It’s not working in IE
Allen – The frustrated developer: What can I do it’s working here at my PC come and check.

Allen has no idea how it’s working on his machine. It’s because he always has developer toolbar opened 🙂

Ok, Here’s the gotcha

Every developer used to have a lot of console.log() calls in his code. So far so good that’s super helpfull, right? but the sad part is this call might fail in IE and and rest of your script might not work. But why and when? It works sometime!

Here’s why

In Internet Explorer 9 (and 8), the console object is only exposed when the developer tools are opened for a particular tab. If you hide the developer tools window for that tab, the console object remains exposed for each page you navigate to. If you open a new tab, you must also open the developer tools for that tab in order for the console object to be exposed.

Read the complete thread here containing some great answers

http://stackoverflow.com/questions/5472938/does-ie9-support-console-log-and-is-it-a-real-function/5473193#5473193

What’s the solution?

There are already a lot of solution proposed by the community, you’ll get some on the previous stackoverflow link and you’ll get some here too

http://stackoverflow.com/questions/1114187/is-it-a-bad-idea-to-leave-firebug-console-log-calls-in-your-producton-javascri

I also had a look at lot of solutions proposed over the net and here’s is what we agreed to use at our company.

var C = {
    // console wrapper
    debug: true, // global debug on|off
    quietDismiss: false, // may want to just drop, or alert instead
    log: function() {
        if (!C.debug) return false;

        if (typeof console == 'object' && typeof console.log != "undefined") {
            console.log.apply(this, arguments); 
        }
        else {
            if (!C.quietDismiss) {
                var result = "";
                for (var i = 0, l = arguments.length; i < l; i++)
                    result += arguments[i] + " ("+typeof arguments[i]+") ";

                alert(result);
            }
        }
    }
}; // end console wrapper.

// example data and object
var foo = "foo", bar = document.getElementById("divImage");
C.log(foo, bar);

// to surpress alerts on IE w/o a console:
C.quietDismiss = true;
C.log("this won't show if no console");

// to disable console completely everywhere:
C.debug = false;
C.log("this won't show ever");

There are lot of advantage we found of this solution over other. We usually put this into a separate file thus making it easy to maintain. Second we turn C.debug = false on production servers so no more console messages and it’s real easy to come back later and turn it on if you need to debug. No need to remove console.log() calls from your code.

Hope this helps this out. Don’t forgot to share so that others can benefit as others might have also faced this console.log issue in IE8 & IE9 browsers.

The following two tabs change content below.

Ankit Kumar

Team Leader at Logiciel Solutions
This is my personal blog. I post about Laravel, Angular, SQL and Web Technologies here. I have been into web development for 7 years and learning new things always interest me. Looking forward to find a teacher in you all.
  • Gagan

    thanks for post. I already face this problem and spend more time.

    • Ankit Kumar

      Thanks for reading gagan

  • Lakhwinder Singh

    Thanks Ankit for this post.

  • Narinder Sahani

    Nice post