Heisenbugs with angular.js and Internet Explorer 9 or: missing console.log

I’m developing a proof of concept web application based on angular.js for corporate users, which – as so often in my career – means that they are using Internet Explorer. Several users complained about sporadic failures which were really hard to pin down, but during debugging sessions boiled down to a simple observation: the errors might or might not happen, but they never occurred when IE’s developer console was open.

The culprit turned out to be, believe it or not, console.log. I knew that some older IE versions didn’t have the console object, but having used it for development quite a while now I thought that IE 9 supports it. I learned recently that this is only conditionally true [1]. The console object will exist only if an actual developer console is open and visible.

A safe workaround seems to be declaring it if it’s missing:

if (typeof console == "undefined") {
window.console = {
log: function () {}
};
}

Surprisingly this code even covers the corner case of the developer console not being initially visible but being later opened by the user: when the user opens a developer console, it will override the mock console and everything is peachy.

Resources

[1] Does IE9 support console.log, and is it a real function?
http://stackoverflow.com/questions/5472938/does-ie9-support-console-log-and-is-it-a-real-function

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s