January 18th, 2011

Debugging Internet Explorer 7 with... Internet Explorer 8

Sadly, we are stuck with IE7 for a while yet. Market share has plummeted below the market share of IE6, but it is still over 10% and more than relevant.

Although we draw the line at allowing users to administer Apostrophe sites in IE6 (of course it supports IE6 very well for the end user experience), IE7 ships with Vista. And Vista is still being deployed today and is sometimes institutionally mandated. So it isn't easy, yet, for some of our potential clients to upgrade even if they want to.

Our expectations are not high. All we really want are accurate line numbers for JavaScript errors. Tragically, IE7 is notoriously terrible at this, never telling you which .js file is involved or getting the line number right.

I've read quite a few posts about debugging IE7 javascript and CSS issues. Most of them focus on using various script debugging tools that are themselves obsolete or difficult to obtain.

Finally I found a mention of the IE7 mode built right into IE8. And it's awesome, as long as you don't trust it blindly. Here's how it works:

1. Launch IE 8 (you might have guessed this part) 2. Pull down the Tools menu 3. Pick "Developer Tools"

A Firebug wannabe pops up on your screen. It's not Firebug, but it's pretty useful, in a "dammit this bug only happens in Internet Explorer" kind of way.

But check out the menu on the top. See "Internet Explorer 8?" Pull that menu down and select "Internet Explorer 7." Now refresh that pesky page with the JavaScript that only fails in Internet Explorer 7.

When the error occurs (and for our bug at least it did occur once we activated IE 7 mode), double-click the little warning icon next to "there are errors on this page" in the time-honored traditional way... and you'll be looking at your IE 7 JavaScript error. With an accurate .js filename and line number.

There there now. It's OK to cry. I know you've waited a long time for this. No need to swear your undying fealty, just buy me a beer at SxSW Interactive.

One more thing before I go: once you fix your bug (two very common cases: a trailing comma at the end of a list of elements in a JavaScript array or object, and the use of the trim() method which does not exist in IE7), make very sure you test again in real IE7. The same goes for any CSS issues that appear to be fixed (or not fixed) in "fake" IE7. The real thing is a little different. But this tool helps a whole lot.
Check out another article
January 16th, 2011
Surfing the Retrowebs
By
December 3rd, 2010
Team Lunch at Le Viet