What's up with the JS Console in IE9?

At some point, a year or two ago, my Windows VMWare instance stopped working. Instead of fixing it, I used it as an excuse to let Jamie be the IE debugging master (he just loves this). But last week we were in the final stages of QA on a project making heavy use of Backbone.js, and one of the last things remaining was a bug that was only appearing on IE9. This bug was breaking the core functionality of the app. We were crunching and Jamie was busy, so I needed to get that VMWare instance going ASAP and dig in.

I used to be really good at debugging IE because I did it all the time. I used to know all the things to check and all the various hacks and such that were needed. But I was out of practice and this bug was killing me.

I was having a really hard time reproducing it. But I finally found the steps:

  1. Fire up a new IE9 session on BrowserStack (for some reason it only happened on BrowserStack for me).
  2. Login to the app.
  3. Boom. Bug.

It took me a couple frustrating hours to get to this point, mind you. But once I was able to reproduce, I thought it was going to be smooth sailing to finding a fix. Not quite.

If I did the above steps, but had the developer console open, no bug. So, sprinkling some console.log messages at various points in the execution path to find out when this was happening wasn’t possible, because the bug wasn’t happening.

Eventually, I asked Jamie to pair up with me on it, and he wondered if we had any console.log calls lingering in the codebase that we had forgotten about. I wasn’t convinced that would be the issue. The fact that these console.log messages were working was what had tricked me into thinking IE9 fully supported console.log. That was where I went wrong.

In IE9, window.console is defined only when the developer tools window has been opened

Grrr. That’s right. I had forgotten about this. Until you open the developer tools window on IE9, the console object is undefined. That means if you try to call console.log you will get an error and execution will stop. This rogue console.log was inside of a cached callback, so we were only seeing the bug on first load.

Also, if you then close the developer tools window, the console object will continue to remain available for the life of that particular browser tab. Open a new tab, and it will be gone again until you open developer tools.

Here’s a thread on Stack Overflow that has some further explanation and potential workarounds if you want console.log to always work in IE9.

Hopefully after writing this post I’ll never forget this again. And hopefully it won’t be long before debugging IE9 is a thing of the past.

comments powered by Disqus