Test your website on Internet Explorer for free (with a little work)
Ah, Internet Explorer. It's the bane of most web developers, especially in those times when you forget to test it before deploying your site to production. I'm sure if there's one thing that causes more grey hairs to grow on our heads, it's because of this browser. Granted, later versions of Internet Explorer have gotten better at needing too many of those quirky conditional HTML comments that we've learned to lovehate.
One of the most common excuses I hear web developers use when bug reports start coming in about parts of a website not working on Internet Explorer is "I don't have a Windows PC!" since now everyone has those fancy Macbooks (like the one I'm typing on...). However, thanks for a few bits of free software, you can have a fully functional Windows system (as a virtual machine) running and ready for you to find those oddities that only crop up on Internet Explorer.
Microsoft has been pretty awesome in offering free virtual machine images for testing purposes, and they work pretty well. I wrote up this article on the company's wiki to help my coworkers set up their laptops with these Windows virtual machines, and I wanted to share it publicly in hopes that this helps others.
Download the virtual machine images
You can download the images here. There are virtual machine images from IE6 to IE11.
Download and install VirtualBox
The virtual machine images are available for different virtualization plaforms. These instructions will cover how to set up the virtual machine images for VirtualBox since it's free. You can download it here.
Set up virtual machine image in VirtualBox
If you downloaded the virtual machine images, they will be archived using Rar. You can use a utility like UnRarX to extract the image. The image will be a .ova file.
Open VirtualBox, and select from the menu File -> Import Appliance. Click on the Open appliance... button, select the extracted .ova file, and click the Open button. On the next screen you can either leave the defaults, but I recommend changing the amount of RAM the virtual machine uses to 1024 MB. When you're done, click the Import button and the import of the image will begin.
When the import is done, right-click the entry for the imported virtual machine and select Settings... from the menu. Do the following changes:
- Under the Network tab, change the Attached to option from NAT to Bridged Adapter. This will allow your virtual machine to access your system's network so you can test your local environment.
- (Optional) Under the Display tab, select 'Video' and check the Enable 3D Acceleration, and increment your Video Memory to 64 MB (or anywhere the slider is green). This step is optional, but it will make the virtualization much smoother.
Booting up and setting up Windows
Once you're done setting up, double-click the entry for the virtual machine in the main VirtualBox window to boot up the system. When the system is booted up and in the desktop, you should install VirtualBox's drivers. Click on the menu and select Devices -> Install Guest Additions.... A prompt should appear on the virtual machine's desktop. Run the executable and install the drivers. Reboot when finished.
Testing your local development environment
After setting up the virtual machine, you should be able to open Internet Explorer and begin testing the staging or production environments. Unfortunately, you can't test your local development environment without editing your hosts file.
In Windows, the hosts file is located in C:\Windows\System32\drivers\etc\hosts. You need to change the permissions to allow the user to update the file. Right-click on the hosts file (Command-click if you're using a Mac) and select Properties. In the window that opens, select the 'Security' tab and click the Edit button. In the new window that opens, select 'Users' from the list, and check Allow on the Full Control checkbox. Save this information.
Double-clicking on the hosts file should open a prompt to ask which app to open the file. Use Notepad for opening the file.
Check your host system's current IP address (not the virtual machine). When you have the IP address, enter it at the end of your hosts file, along with the local domains you want to test. For example, if you want to access http://www.example.dev
and http://subdomain.example.dev
, enter the following:
10.0.1.191 www.example.dev subdomain.example.dev
Note: I don't know a way to allow wildcards for subdomains. If I figure out a way I'll update this article.
Happy testing!