Oh, don’t all Web Developers love IE, especially our good old friend IE6? You do, don’t you? And why is that? Because without the quirks of IE6, most of us would sit around at our desks at the office, glancing at each other, surprised by the fact how easy development could be if there would only be Firefox (and Firebug, of course). But that isn’t the case. So instead of taking half the week off because everything works fine in Firefox or any equivalent standards-compliant browser, we need to do overhours to make things work in IE. Ok, I am exaggerating. But in this sarcastic and exaggerated start of this post, there lies a bit of truth.
So imagine you beautifully crafted your page (using proper (X)HTML, JavaScript and CSS) and tested it in Firefox or any similar browser that knows how to spell “standards-compliance”. You know you have to test it in IE. If you are using a PC that might have crossed your mind earlier than Mac users, but in times of Parallels, testing should not be a problem. So you open IE6 and take a look at your page. And you realize: “Well, something does not quite work here…”. Might it be CSS or JavaScript, but debugging your page to make it work in IE6 is inevitable.
But how to do that? There is no Firebug available for IE, which would allow me to track down my problem. You could use a bunch of alert()-statements in your JavaScript to see where the values are going wrong in your code. I thought, there have to be better solutions out there to tackle this problem.
And the answer to this seems to be: YES. There are indeed tools out there which let you debug your code and find solutions to make your page work properly in IE. Below please find a list of tools I have discovered recently and tried out quickly at least. Most of them are free, unless noticed otherwise.
Plugins (Add-ons) for IE
- IE Developer Toolbar: suitable for CSS and DOM debugging
- Nikhil’s Web Development Helper: provides a lot of Firebug-like features as e.g. DOM inspector, displaying HTTP traffic and a console. Requires .NET framework v2.0.
- Debug Bar: DOM inspector, scripting console
- IE Watch (30 days evaluation): offers a whole bunch of features but is not really intuitive to use
- Web Accessibility Toolbar: as the name implies, it mainly provides tools for targeting accessibility issues
Standalone Products
- Visual Web Developer Express
- Microsoft Script Editor: only available if you have a licensed copy of Microsoft Office XP/2003. Jonathan Boutelle explains how to use it for JS debugging
- MS Script Debugger
Other JavaScript-based solutions for debugging
- Firebug lite
- YUI Logger
- Simple Debugger - Extended YUI Logger
- XRAY (bookmarklet): Use it to display box model properties for any item on a page
What is important to mention is that if you want to use a standalone software product on your system for script debugging IE, you need to turn on/enable script debugging first. To do this in IE6 you need to go to “Tools” > “Internet Options” > “Advanced”. In the “Browsing” section, you then need to uncheck “Disable Script Debugging (Internet Explorer)” and “Disable Script Debugging (other)”.
XRAY (http://www.westciv.com/xray/) is interesting too. Have you tried it? I’ve been using it a bit.
@Brad: Yeah, you are right, I forgot about XRAY. Will add that to the list.
IMO SplineTech JavaScript Debugger (http://www.javascript-debugger.com/) is excellent for IE debugging. It’s a standalone tool though, not an add-on.
@Art: The website looks ugly, but the product sounds promising. Although, if you are not working for a company who is willing to pay $80,- for a single license, I’d rather not invest that kind of money.
[...] through to Klaus Komenda’s site. Boy, was I pleased with what I found there! In a post about Debugging IE, Klaus listed a variety of tools for doing so. Most importantly, he pointed out a Developer Toolbar [...]
[...] bug on my site and, well, it is time to google for a good IE script debugger, I found this and this, and decided to use IE Developer Toolbar and Debug Bar since it looks neat and user-friendly. The [...]