As a web developer you are probably aware of that sinking feeling in the pit of your stomach that you suffer when posed with the idea of testing your freshly written JavaScript that works perfectly in FireFox.

For years now, we have had to ‘suck it up’, and pour a glass of scotch to get through an afternoon of testing in IE. As I am now a Web Developer at Rearden Commerce who currently caters to an audience of enterprise users instead of your standard bay area geek population — I have to make sure everything I commit works nicely in IE.

Last week after a few hours of IE testing, and dirtying my code I worked so hard to perfect and refine with alerts everywhere I decided that there HAD to be a better way to do this. I went ahead and spent many hours searching the web, installing everything I could find that promised to make IE development easier and happily I can say — it was a success.

First and foremost however, there are a few tips I can give you right off the top that will make your life easier. Before you take the plunge into line by line alerting, go through your code and do the following;

* Remove unnecessary commas in your data structures:

( FF ignores this one, but IE will give you an error that isn’t helpful )
ex.

var superNinjaObject = {
me: 'adam',
home: 'oakland',
};

* Don’t try to access characters in a string as if it was an array:

( Works in FF, but IE will simply give you undefined and not tell you a thing )
ex.

var myString = 'Welcome to the Jungle';
$('mynode').innerHTML += myString[14]; //Broken in IE
$('mynode').innerHTML += myString.charAt(14); //Compatible alternative

Now we can get to what you are really interested in, the new tools:

1. Internet Explorer Development Toolbar

Get It: Microsoft Downloads

This is Microsoft’s best stab at a firebug equivalent. This gives you all the flexibility you need to inspect the DOM tree, look at CSS, Scripts, Images, Network etc. To put it simply, it makes IE development something you can swallow. I can’t image going back to IE development without this. Unfortunately it is missing two things, the first is the absolutely necessary JavaScript shell. This can be solved by using the IE JS Bookmarklet that you can find at blog.monstuff.com. Add this to your favorites and then whenever you need a JS shell, pop this up and hack away ( I agree it would be nicer if it was built in ). The second is the ability to set breakpoints and step through your code debugging and introspecting objects and variables. I do have a solution for this, see new tool number

2. Visual Web Developer 2008 Express Edition

Get It: Microsoft Express

This is the solution to your break pointing, stepping, introspecting needs. The way you use it is a bit awkward, but it does complete the development experience. To use this you need to create an empty web project and then start debugging. This will launch IE and bring you to a blank server page off the local MS web server instance. At this point you can go ahead and plug in the URL of the app you are wanting to test. Additionally if you have set any ‘debugger;’ statements in your source it will pick that up and automatically ask you if you want to start debugging there, or continue on. When you stop the debugging session in VWD it will kill your browser, so beware if you have to navigate to some deep point in your app you are probably going to get frustrated if you write buggy code. At it’s 1.4 Gb space requirement it’s hardly a comparison with firebug — but it’s certainly a step up from alerts all day long.

3. Microsoft Script Editor

Get It: Jonathanboutelle.com

If you don’t already have it installed, a good midpoint between nothing and Visual Studio Express is the Microsoft Script Editor which comes with office 2003, heres a video on how to use it, Video. Thanks for the feedback blogosphere.

I hope this made your life at least a small amount easier, happy IE developing.