Jul 14, 2010

Setting up a proper web development testing environment using VirtualBox and Windows on Linux or Mac

First off, it's best to be able to do your web development on a Mac because
  • Coda, by Panic Software, is a great app and it's not for Windows or Linux
  • It's harder (maybe impossible) to set up a Mac emulator on Windows or Linux than it is to emulate those operating systems on a Mac. So if you want it all, get a Mac. What I personally prefer is to have a physical computer for each of the main user groups in your target market.
I do my development on Ubuntu Linux, and have Macs around for testing. I need to be able to test with all the popular web browsers on Mac and Windows. That means:
  • Chrome for Linux and Windows
  • Safari for Mac and Windows
  • Firefox for Linux, Mac and Windows
  • Internet Explorer for Windows
So on my Linux computer, I use VirtualBox, a great free emulator from Sun Microsystems, and I have a Windows XP install that I use in a 1024 x 768 window. I have Chrome, Firefox, Internet Explorer, and Safari installed on it.

Because Chrome has the best DOM Inspector (the "Inspect this element" function in the right-click menu), and because Chrome uses the Webkit engine which also powers Safari, and because those are the two fastest-growing browsers in terms of active user base, I use Chrome as my main development and testing environment. Once I get something working in Chrome, I verify that it works in Firefox and Internet Explorer. I try to do this verification as frequently as is convenient, so that I don't end up having to backtrack and use Firebug in Firefox, which is kind of clunky, or Internet Explorer's absolutely hellish DOM inspector, to debug a webpage.

In Internet Explorer 8, you can use the Compatibility View and Developer Tools to inspect how a page would perform in earlier versions of the browser, but it's a good idea to have a Windows2000 install with IE6 as one of your VirtualBox machines, if IE6 compatibility is a requirement for your projects. As a side-note about IE6: I exercise due diligence in using industry-standard best-practices, which dictate that, at the very least, the site should work in all browsers, and look as good as it can in each, even if that means looking different in each. If a client demands that their site be identical in all browsers, and especially if there's anything even somewhat cool about the site, it can double or even triple the budget. Web Designers rarely present this information to potential clients, because we're embarrassed about how helpless we are to accomplish this task efficiently. We all blame the software.

Anyway, here's how to actually look at your files in emulated Windows without having to post them online:

In VirtualBox, you can set up shared folders to bridge the gap between your Windows browsers and your Linux or Mac filesystems. Your shared folders are accessed through your Windows network places, and function like mounted network folders. Sometimes I have to copy files over in order to get them to work properly, because of network permissions problems created by my Linux host. Host means the OS on which I'm running the emulator.

Setting up a Windows install in VirtualBox on a Mac is very similar to setting it up on Linux, and it's also an easy way to access Linux development tools on your Mac desktop.