In this blog post I'm writing about a few ways to debug and test websites for Internet Explorer (IE).

Windows XP mode

If you have Windows 7 (Professional, Enterprise or Ultimate) installed on your computer you can download Windows XP-mode for free from Microsoft. Windows XP mode is a Virtual machine that lets you run Windows XP on your Windows 7 computer. More information can be found at Microsoft’s Virtual PC site.

The best thing with XP-mode is that it is (at least now) shipped with IE6 as standard web browser. In this way you have the "original" way to test your sites on IE6.
Just don't allow XP-mode to install updates automatically, because it will overwrite IE6 with IE7.

If you want to test your sites on IE7 you can download a standalone version of IE. I prefer Tradesoft’s version which can be downloaded from Tradesoft's home page.

Using IETester

Another way to test different versions of IE is to use IETester. In this program you open tabs for different IE versions (from 5.5 to 8).
Windows 7 is supported in the latest release. In my opinion IETester works quite fine and in most of the cases renders the pages like the real IE-versions.
But once I did find an error in absolutely positioned CSS, so be aware! :)

DebugBar

I also want to give you a tip about DebugBar. It an add-on for IE that allows you to debug the site you are visiting. Just remember to activate the add-on by right clicking on the taskbar, selecting DebugBar and clicking the Activate button.

Now you can write HTML and CSS lightning-fast!

Zen coding is a new, shorter way of writing HTML/CSS. It's basically a collection of snippets that you use through writing simple syntaxes.

Here's an example for HTML :

ul#name>li.item*3

provides

<ul id="name">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

and similary for CSS:

bdrz:w

provides

-webkit-border-radius:; 

These are just two simple examples, visit http://mondaybynoon.com/2009/08/17/the-art-of-zen-coding-bringing-snippets-to-a-new-level/ for more information.

I should mention that this is a plugin for your IDE. Currently it supports NetBeans, Coda, Texmate and Aptana. There is no official release for Visual Studio but Einar Egilsson has written his own for Visual Studio. You can find it here: http://tech.einaregilsson.com/2009/11/12/zen-coding-visual-studio-addin/

Happy front-end coding!!

One of the most difficult things to test is that the frontend works flawlessly in all versions of Internet Explorer. I've used Multiple IE as a tool in the past when testing IE6 but with the current upgrade to IE8 multipleIE doesn't work as well. besides, the IE7-mode in IE8 isn't really precise. Since then I gave IE-Tester a try. So far it has worked perfectly and it seems to render IE6 better than Multiple IE, and IE7 better than IE8-compatibilty mode.

So, to conclude, use the IE-Tester tool for all you Internet Explorer compatibility tests. Works perfectly with IE8 installed on you machine.

http://www.my-debugbar.com/wiki/IETester/HomePage