31 stylesheet limit... class != className... double margins... get me out of here!

October 22, 2009 12:50 PM

So, I am sadly tasked with debugging sites on IE every once in a while. Is there anything that even approaches the awesomeness of FireBug/Web Inspector for this task?

And, the more advanced the better. I'm debugging what one might call 'serious shiz' like namespaces, tricky CSS bugs, javascript screwups...

Thanks! (and, of course, I'd prefer it to be free but if it's a paid deal and it works great it would be cake to sell it to the ol' upper management)

posted by tmcw to Clothing, Beauty, & Fashion (11 answers total)

"IE developer toolbar". Free, provided by microsoft.
posted by shownomercy at 12:52 PM on October 22, 2009

FWIW, I have never gotten the IE Developer Toolbar to work in any version of IE > 6, though supposedly it works with 7. Not so for me. And states outright it does not work with 8.

Also, link.
posted by rocketpup at 1:05 PM on October 22, 2009

IE8 has the Developer Tools which are fairly close to firebug, even if the interface is super annoying.
posted by hobgadling at 1:16 PM on October 22, 2009

Unfortunately, there is no equivalent to Firebug for IE. The debugger toolbar is slow and it's interface is so hard to use it's quicker to debug JS with alert()s and CSS with background colors in a conditional comment stylesheet.
posted by wolfr at 1:30 PM on October 22, 2009

Firebug Lite works in Explorer.
posted by clearlydemon at 1:42 PM on October 22, 2009

I've used Firebug Lite, as clearlydemon mentions. It's the best thing I've found for debugging IE... but it's still not as great as Firebug in Firefox.

However, between VirtualBox, Multiple IE, and Firebug Lite, debugging IE and its various versions is slightly less painful and frustrating on my mac.

I'll watch this thread with bated breath to see if anyone suggests something better. I'd love to know about it!
posted by jacquilinala at 2:03 PM on October 22, 2009

Best answer: Visual Studio, 2008 at least, allows you to attach to the IE process and debug Javascript in a very normal debugging-like manner. A little bit like hitting a bug with a sledgehammer but it works.
posted by meowzilla at 5:11 PM on October 22, 2009

1) Use a framework if possible to minimize your IE bugs (jQuery is a good choice for this, as it encourages you to write framework-heavy code that tends to have cross-browser compatibility already taken care of).
2) IE Developer Toolbar. This seems to be as good as it gets, sadly. (I've had no trouble using it with IE7 -- usually IE8 introduces only a couple of additional bugs if you have IE7 compatibility).
3) Fiddler, if you need to see POST/GET/headers.
4) Check your CSS/JS periodically in IE if you're not doing so already. If you're shooting for IE6 compatibility you need to make specific markup and selector choices while writing your frontend -- it's probably not enough to add compatibility afterwards.

I just finished a three/four month project where we wrote a pretty heavily JS-dependent frontend client (think lots of drag/drop) that needed to be IE7 compatible, and while we had to do a lot of CSS/HTML workarounds, we had almost no IE7 JS bugs, because we used jQuery for DOM manipulation and avoided special features in JS (no getters, setters, etc).

I haven't tried using Firebug Lite, but based on the comments in this thread I will give it a shot in the future.

I guess all of this assumes you work for a company that has a reasonable process. If you work somewhere where someone is throwing code at you over the fence and making you fix it, your life is going to suck regardless.
posted by fishfucker at 3:31 AM on October 23, 2009

(you should also be unit-testing your javascript code in a framework that has an IE compatible test runner. This helps *all* your debugging, of course, but is immensely helpful for IE -- it often can immediately narrow your problem scope.)
posted by fishfucker at 3:35 AM on October 23, 2009

Response by poster: - I've tried using Firebug Lite, but several of the sites I'm debugging have serious CSS-resets which break it badly.

I haven't gotten to the point of unit-testing my javascript - it seems like an even tougher case for unit tests than web programming, given the intertwineness (entangling alliances) of the dom and javascript code. There are basically no pure functions in javascript.

I'll check out the IE8 debugger and try to get developer toolbar working with ie7 - it hasn't worked for me, but I guess it could with some more tinkering.

There are a few things that alert() and css stylesheets just can't do for me which I need. Like... a big problem I'm running into is the apparent existence of different standards-compatibility modes in IE7 that affect how it handles namespaces before the document finishes loading ;(
posted by tmcw at 8:54 AM on October 23, 2009

This is a shot in the dark, but could you try installing the "Load with IE" plugin which lets you load a page in firefox that is rendered by IE. Then, you could use firebug...

Just a thought...Hope it helps!
posted by jdlugo at 12:45 PM on October 23, 2009