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:
- Fire up a new IE9 session on BrowserStack (for some reason it only happened on BrowserStack for me).
- Login to the app.
- 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
console.log messages were working was what had tricked me
into thinking IE9 fully supported
console.log. That was where I went
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
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.