Hello, world – this is my first post! I’ve learned a bunch since joining the Studiobanks team three months ago. Lots of that learning has been dedicated to becoming accustomed to a new workplace (workflows, project history etc), but at least one universal pearl of wisdom comes to mind that I think would be helpful to lots of folks – testing Internet Explorer 6, 7, 8, and 9!

Since we’re all Mac here at the office, I’ve become reasonably familiar with the process of setting up multiple virtual machines to provide a rock-solid (and free) testing environment on my local computer. I’ve employed other techniques over the years (IETester, online screenshot services), but nothing comes close to having the actual browsers loaded in their own sandboxed environment. We’ll achieve this by creating four separate virtual machines in VirtualBox.

Additionally, we’ll look at getting MAMP installed and configured so you can test your local sites inside the VMs without having to constantly upload to an external server. I love that part.

Goals

By the end of this guide, you should have the following items working:

• MAMP – used to run Apache, MySQL, and PHP locally
• VirtualBox – used to create the virtual machines that will run Windows / IE
• A separate VM for each version of IE (6, 7, 8, 9)
• A simple html file that you can access locally on your Mac and in all four VMs

Credit

I used three sites heavily when setting up my environment the first time. This guide is going to lean on them a lot. Credit is due to the following:

• https://github.com/xdissent/ievms
• http://jeffrey-parker.com/blog/dev/how-to-use-ie6-ie7-ie8-and-ie9-and-other-windows-apps-on-osx-lion-using-virtualbox-for-free-legally
• http://osxdaily.com/2011/09/04/internet-explorer-for-mac-ie7-ie8-ie-9-free/

Setup

This guide is written from the perspective of OSX 10.6. Things may be a smidge different for other versions, but I expect this will give you a great head start. Let’s get to it!

The first piece of upkeep is to set up our folder structure. I like to keep all of my local websites organized in a single “Sites” folder in my User folder. I keep a shortcut to the Sites folder in my Finder sidebar so it’s always just a click away. It’s certainly possible to use another setup, but this guide is going to refer to Sites.

Inside the Sites folder, create a subfolder called “greatwebsite.local” This is going to hold all of your site’s files. Inside greatwebsite.local, create an index.php (or .html) file and put some kind of message in it (“Hello world” etc). This is just going to help us see that things are working down the road.

You should end up with:

/Users/USERNAME/Sites/greatwebsite.local/index.php

Apps

We’ll be using these items. Hold off on downloading them all at once. I’ll get to them individually:

• IEVMS
• MAMP
• GasMask
• VirtualBox

IEVMS

Though we won’t get to configuring this piece until a little later, this is really the meat-and-potatoes of what we’re doing. GitHub user Greg Thornton has made this process infinitely simpler by providing readily available packages for each virtual machine you need to create. Not only do these packages provide a stable Windows install with the browsers pre-installed, but he’s discovered that by using VirtualBox’s Snapshot feature that we’re able to run these installs forever, without having to worry about Windows registration or activation. Sound a little shady? Not to worry. These packages are based on virtual machines that Microsoft originally released for this very reason. The Snapshot feature simply allows us to return to a “just installed” state if the VM ever tries to force you to activate the OS. Huzzah!

Mr. Thornton has provided four separate packages – one per browser for IE 6, 7, 8 and 9. It’s possible to download all of these images at once, but I highly recommend grabbing them one at a time. They’re pretty large and you don’t want a download to fail in the middle and have to start over again.

So, go to the GitHub project page and see the Installation section. You’ll want to copy the terminal command under item 2 for “Install specific IE versions.” Fire up Terminal, jog over to your User folder, and paste in the command. Then, edit the command to install ONLY IE6 (repeat for other versions). Your command should end up being:

curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="6" bash

Execute!

You should see lots of text and a (probably slow) progress ticker that shows the package being downloaded. This is going to take a while, so we’ll do some other setup in the meantime.

MAMP

MAMP is going to run Apache, MySQL, and PHP for you on your own machine. If you’re already using MAMP, be sure to check your configuration and keep any differences in mind for later. This guide is going to make some customizations to the default preferences.

You can get MAMP here.

Once you’ve got it installed in your Applications folder, go ahead and launch it. Once it’s running, click the Preferences button and make these changes:

1. On the Ports tab, change the default port from 8888 to 80.
2. Next, click the Apache tab. Use the “Select” button to navigate to your Sites folder (or equivalent).

Now we need to edit a few Apache configuration files. You’ll want to open them in a text editor that shows line numbers. I prefer TextWrangler, but anything that shows line numbers will do. Take a deep breath:

Applications/MAMP/conf/apache/httpd.conf

1. Line 48: Change “Listen 8888" to “Listen 80"
2. Line 179: Change “ServerName localhost:8888" to “ServerName localhost:80″
3. Line 199: Change “AllowOverride None” to “AllowOverride All”
4. Line 247: Add “index.htm” if you want to use that extension for your index file (optional).
5. Line 346: Change “AllowOverride None” to “AllowOverride All”
6. Line 355: Change “AllowOverride None” to “AllowOverride All”
7. Line 364: Change “AllowOverride None” to “AllowOverride All”
8. Line 373: Change “AllowOverride None” to “AllowOverride All”
9. Line 403: Change “AllowOverride None” to “AllowOverride All”
10. Line 525: Uncomment this line (delete “#” at the beginning).
11. Save your file (Control + S since you’re in Windows) and close it.

Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

1. Copy the bottom-most block that begins with “<VirtualHost 1. :80>” and ends with “</VirtualHost>” Paste that block at the bottom of the file.
2. Delete the lines for “ServerAdmin,” “ServerAlias,” “ErrorLog,” and “CustomLog.” You can use these lines for advanced configurations, but we don’t need them.
3. You should be left with “DocumentRoot” and “ServerName.”
4. On the DocumentRoot line, change “dummy-host2.example.com” to “greatwebsite.local”
5. On the ServerName line, change “dummy-host2.example.com” to “greatwebsite.local”
6. Save your file (Control + S) and close it.

That’s it for MAMP. Go ahead and quit the application to get it out of the way.

GasMask

GasMask is a little application that makes it super easy to edit your machine’s hosts file, which is responsible for telling your browser what IP address to associate with a domain name. In a local test environment, you need a unique entry for each site you want to test. Our testing URL is going to be “greatwebsite.local.” It’s a good idea to develop a convention for your url extensions to keep things tidy. You don’t have to use “.local” – whatever you choose, just make it consistent.

Once GasMask is downloaded and installed, go ahead and launch it. You should see a line that says “127.0.0.1 localhost.”

1. Copy that line and paste it at the bottom of the document, underneath anything else you see.
2. Change “localhost” to “greatwebsite.local” (the url we’re going to use to test our setup).
3. Be sure to SAVE your hosts file, then quit GasMask.

VirtualBox

VirtualBox is a free application developed by Oracle that allows you to create multiple instances of other operating systems. Each of these instances is called a virtual machine. We’re going to end up with four virtual machines – one per browser that we need to test.

By this point, your IE6 package should be finished downloading. You’ll know it’s done if you see “Done” and your bash prompt in the Terminal window. If it’s not, go get a beverage, throw some darts, or maybe do a little vacuuming.

This download will create a new folder called “VirtualBox VMs” in your user folder. There should also be an “IE6″ folder inside of the parent. If everything seems to be finished downloading and you’ve got VirtualBox installed, go ahead and launch it.

You should see an entry for “IE6″ in the left hand column. This represents the virtual machine that you’re going to use to test IE6. Don’t launch it yet! We need to customize a few things:

1. Launch System Applications > Network. Make a note of your IP Address (mine is 192.168.1.81) and the name of the active connection in the left column (mine is Ethernet 2).
2. Back in VirtualBox, select the IE6 VM and click the Settings button.
3. On Network > Adapter 1, change “Attached to:” to “Bridged Adapter”
4. Change “Name:” to match the name of the active connection that you saw in System Preferences.
5. Expand the Advanced section, and change “Adapter Type:” to “Intel PRO/1000 MT Desktop (82540EM).”
6. Click OK to exit Settings.

Launch IE6 VM

Whew! That’s a lot of reading and customizing. You’re almost there. In VirtualBox with IE6 selected, click “Start.” When was the last time you saw Windows XP boot? It should be doing so now. Use “Password1″ to log in.

If this is the first time you’re launching VirtualBox, you’ll probably see a notification about “hotkeys.” Basically, when you’re working inside the VM, all your mouse and keyboard input is going to be applied to the VM. Use your hotkey (left Command) to escape the VM sandbox and get control of your mouse and keyboard back.

You’re going to be presented with lots of loud warnings about Windows not being activated and new hardware being detected. You shouldn’t care about any of them – other than that you need to dismiss / cancel them as they appear. If you’re asked to restart the system, refuse! So, just hit Cancel or No in the dialogs that appear until you’re left with a an open text file on the desktop. Then, close that text file and we’re ready to proceed.

Full-Screen Viewing

You’ll probably notice that XP is running inside a cramped little window. We can fix that! The package you downloaded from GitHub contains a pre-mounted disk image called “Guest Addons” that will help you run the VM in full screen mode. When you’re ready:

1. Hit your hotkey (left Command) to get control of your mouse back. Resize the main Mac window that your VM is running in to a better size
2. Back in the VM, click the Windows Start button
3. Head to Control Panel > Display > Settings tab
4. Under “Screen resolution,” move the slider to a reasonable size – whatever your monitor will support. I ended up using 1280 x 1024.
5. Hit Apply, then confirm the setting when asked.
6. Close all of the open windows – you should now be running close to full screen.

Network Drivers

For IE6 only, you need to install networking drivers to allow the VM to communicate with the Internet and your local computer. The GitHub package helps us out here too. The IE6 VM should already be loaded with “drivers.iso” mounted on its E: drive. To install the drivers:

1. Choose Start > My Computer
2. Click “Folders” at the top of the window
3. Choose “drivers (E:)” from the left column
4. Double-click “PRO2KXP” to install the drivers

You don’t need to change any of the defaults during the install process. As soon as the install is finished, you can optionally eject the drivers.iso image from the E: drive just to keep things clean – you won’t need it again.

Launch Internet Explorer 6

Now that the network drivers are installed, you should be able to connect to the Internet. Just select Start > Internet Explorer and it should connect to good ol’ msn.com.

Configure Hosts File

Getting IE online is half the battle. The real point of all of this is to be able to test your local website directly in the VM without having to upload files to an external server. To do so, you need to edit the Hosts file. It’s hidden in a deep dark corner of Windows, of course.

C:\Windows\System32\drivers\etc\hosts

Once you’ve located that file, go ahead and right-click on it and choose “Send To > Desktop (create shortcut)”. Find the shortcut on your desktop and open the file. Essentially, we’re performing the same action as when we used GasMask to edit your Mac’s Hosts file. But this time, instead of using 127.0.0.1 to point to greatwebsite.local, you need to use your Mac’s internal IP address. You can find it in System Preferences > Network if you didn’t make a note of it earlier.

Back in the VM’s hosts file, make a new line at the bottom of the file, enter your Mac’s local IP, and then put in “greatwebsite.local” for the url you’re going to use to test. For subsequent sites, you’d just copy the “greatwebsite.local” line and update the url (to “someothersite.local” or whatever you want it to be called).

SAVE the hosts file (again, Control + S), then head back to IE. Enter “greatwebsite.local” for the url – hopefully you should see your “Hello, world” message.

How to Shut Down / Save Machine State

So now you’re able to test. But what about when you want to close the VM? This is a bit non-intuitive. It’s certainly possible to shut down the VM using the Start menu, but you should definitely avoid doing so. The great power of these GitHub packages is that they provide a way to use the VMs indefinitely. So instead of shutting down, you actually should “Save Machine State” whenever you want to exit a VM. Do do this:

1. Use the hotkey to get your mouse and keyboard back, focused on your Mac
2. Click the red close button in the upper left corner of the VM window
3. You should see a prompt with three choices
4. Choose “Save the machine state” and click OK

The VM window will close and you’ll be back in VirtualBox. The VM entry should say something like “IE6 (clean) / Saved.” This indicates two things:

• “(clean)” refers to the original Snapshot, or the state of the VM when it was first installed. This is the magic trick for running the VM indefinitely. If you ever are unable to log in because Windows wants you to activate the software, this is the backup plan. Make sure the VM is closed, then go to VirtualBox and click the “Snapshots” button to view the available Snapshots. To restore the VM to its original state, select the “clean” entry and then click the “Restore Snapshot” button. You’ll have to go through the whole VM configuration process again, but this should work forever.
• “Saved” refers to the current machine state. When you launch the VM the next time, it will be just as you left it – analogous to Hibernate.

The good news is that you’re done configuring all the building blocks that you’ll need from here on out. From here, you need to download the other versions of IE that you want to test. There really shouldn’t be any other configuration that you need to do for the other browsers other than what’s outlined above. Keep in mind that IE6 is the only browser for which you need to install the network drivers – the others should work out of the box.

Installing IE7 – 9

To get the other VMs set up, just run the terminal command again, making sure to edit it for the next browser that you want to install. So:

1. curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS=”7″ bash
2. curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS=”8″ bash
3. curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS=”9″ bash

Again, I recommend running these one at a time to avoid putting all your eggs in the same download basket.

After each one is finished downloading, you can return to VirtualBox and see that the new VM is available to launch.

You can follow a similar procedure for each subsequent browser for adjusting the display resolution and editing the Hosts file. Here are the UI steps you’ll need to follow for those (in case you’re not familiar with Windows):

• IE7: Start > Control Panel > Personalization > Display Settings
• IE8: Start > Control Panel > Appearance and Personalization > Display > Adjust Screen Resolution
• IE9: Start > Control Panel > Display

The Hosts file will always be located in the same place (C:\Windows\System32\drivers\etc).

Here are abbreviated instructions for setting up the other VMs. If you’ve gotten IE6 to work, these should be a breeze.

IE7

1. Update Network Settings in VirtualBox control panel. Use Bridged Adapter and choose the same connection method you did for IE6 (mine is en1: Ethernet 2). Refer back to System Preferences > Network if you can’t remember what it is.
2. Start the VM
3. Choose the Administrator account and use “Password1″
4. When you’re asked to activate Windows, choose Activate Later
5. Cancel or close all of the subsequent messages (Found New Hardware, Set Network Location, Restart etc)
6. IE7 should be connected to the Internet at this point
7. Configure display settings, hosts file
8. When you want to close the VM, be sure to close the Mac window and choose “Save Machine State”

IE8

1. Update Network Settings in VirtualBox control panel.
2. Start the VM
3. Administrator / Password1
4. This VM can take a while to load the first time. Be patient.
5. When you’re asked to activate Windows, choose Activate Later
6. Cancel or close all of the subsequent messages (Found New Hardware, Set Network Location, Restart etc)
7. IE8 should be connected to the Internet at this point
8. Configure display settings, hosts file
9. When you want to close the VM, be sure to close the Mac window and choose “Save Machine State”

IE9

1. Update Network Settings in VirtualBox control panel.
2. Start the VM
3. Administrator / Password1
4. This VM can take a while to load the first time. Be patient.
5. When you’re asked to activate Windows, choose Activate Later
6. Cancel or close all of the subsequent messages (Found New Hardware, Set Network Location, Restart etc)
7. IE9 should be connected to the Internet at this point
8. Configure display settings, hosts file
9. For some reason this package contains tons of shortcuts on the Desktop. I deleted all of them except for IE9, Firefox, Chrome, and the shortcut to my hosts file.
10. When you want to close the VM, be sure to close the Mac window and choose “Save Machine State”

Conclusion

Yes, it’s a lot of work. But I think it’s well worth it. Here’s what you’ll gain:

• The ability to test websites locally on your Mac
• The ability to test local websites in Windows from your Mac
• The ability to test local websites in real versions of Internet Explorer – no emulation
• The ability to do all of this without having to upload your files to an external server
• And, though I haven’t mentioned it yet – you’re able to install any other Windows browser in any of these VMs.
• It’s all free

You’ll of course become more familiar with the VM process, and pretty soon you won’t think it’s a big deal to revert to the (clean) snapshot.

Thanks for reading, happy testing!