Still stuck on IE6 in 2010 and need to debug on other versions? How to use MS Virtual PC

I never thought I would get halfway through 2010 and still be building applications for Internet Explorer 6, but here it is July, and I’m still not allowed to update my browser, because my product needs to support IE6. In the past 3 years, whenever I needed to debug in IE7, I fired up VMWare  and used the same Windows XP/IE7 image that a colleague generated for me way back when. But I’ve also used Microsoft VirtualPC for testing IE8 in the past, so I’ve decided I’m going to start from scratch with MS Virtual PC and an image for IE7, and I’m going to document it here, in case I have to do it again, anytime soon. (Like on my laptop where I’ve got IE8, but may want to test backwards.)

Step 1. – Install Microsoft Virtual PC

Since I am still running XP, I need Virtual PC 2007:  http://www.microsoft.com/windows/virtual-pc/support/virtual-pc-2007.aspx. There is also a version for Windows 7. (Of course if you were on Windows 7, you wouldn’t be stuck on IE6). After you go through the straightforward install steps and run the application you’ll see this window:

The Virtual PC main screen

Step 2. Download a Virtual Hard Drive Image that contains IE7

Now that you have the software installed you need an image that will contain the operating system and IE. Conveniently, Microsoft has already set up images that we can download and use to test various IE versions.  Download IE7 image here. I happen to care about IE7-on-XP now, so that’s the one I’m going to download.

Microsoft Virtual PC Images for Testing IE

When this .exe file is done downloading it, execute it. It will generate a vhd file, “IE7 on XP SP3.vhd”. This is a “virtual hard drive”.

Step 3. Create a new Virtual Machine

Click on the “New…” button of the Virtual PC Console. Use the default settings to create a new machine. You could choose to create a new one, if you want more control over the settings, but that doesn’t matter much to me. Choose any name for your machine. You want to go into settings after the machine is created, so it’s easiest to leave the settings checkbox checked. When that dialog box opens, choose hard disk 1 and assign to it the vhd file that you downloaded. Press OK.

Step 4. Set up network sharing

Once you’re in your virtual machine, you’re going to want to have Internet Explorer connect to some website, which means you need a network connection. You set this up in the Virtual PC Console Settings too.:

Step 5. Run the Virtual Machine

Now simply start your virtual machine. The executable also created a readme.txt file. That file should have the password for the IETest user on the virtual machine. For me, this was P2ssw0rd.

Step 6:  Run IE and get to work

Assuming you’re up and running, you should be able to run IE and browse the web. If you’re like me, you’re trying to debug a problem in an issue in an application running on the host machine. On the host machine this would be at http://localhost. You’ll need to get the IP address of the host machine and use this instead. In my case I’m running tomcat on port 8080, http://localhost:8080/, so the IP address of my app from within my virtual machine is something like http://123.123.123.123:8080/. My company’s VPN uses DHCP, so I have to check my ip address before every debug session (via ipconfig).

Step 7 Install the other tools you need in the virtual machine

So now you’re able to see and run your app from inside the virtual machine. That doesn’t mean you have everything you need to debug your issues. Install what you need into the virtual machine itself. For me, since I’m debugging both JavaScript and CSS issues in IE7,  I have a couple of tools I like to use, specifically Visual Web Developer Express for JavaScript and the IE Developer toolbar for CSS.

Advertisements
This entry was posted in Web Development. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s