Local web testing on Mac, Windows and mobile devices

If you do web development you need to test across multiple devices, browsers and operating systems. My primary development machine is a Mac however I also run Windows 7 via Bootcamp/Parallels for browser testing locally (and for the occasional .Net based project that I take on). Now that mobile has become such a factor in the web development process it is also critical to test across devices. Being able to quickly test web sites and web apps without having to push files to a staging server is a huge time saver.

My local setup allows me to test:

• Mac OS - Safari, Firefox, Chrome
• Windows - IE, Firefox, Chrome
• Mac Mobile - Safari iOS on iPhone, iPad and iPod
• Android Mobile - Android Browser, Firefox and Opera on Google Nexus One
• Android Other - Android based touch screen on my treadmill

The one critical piece to being able to setup a testing environment like this is to have a wireless router that can handle local DNS services. In my setup I am running a router with DD-WRT that allows DNSMasqing. DNSMasqing allows me to setup locally hosted domain names that can be served from different machines in my local network. In my case I can host sites from either my Mac (via MAMP) or Windows (via IIS7).

Once you have local DNS services running the next issue, if you are running Mac and Windows on the same machine, is to get the operating systems to see each other at the browser level. If you are running Windows via Parallels simply setting up the local DNS service to point a domain at your Mac machine will work. From Windows you should be able to easily see any Mac hosted web site. Going the other way, seeing Windows hosted sites on the Mac requires more effort. After a lot of trial and error I was able to get my Mac based browsers to see the Windows hosted sites. You can use the steps below to save you a lot of time and frustration.

• Make sure your Windows VM in Parellels has the network adapter set to Bridged mode
• Configure your Windows network adapter to have a fixed IP address
• Add a new DNS entry/DNSMasq on your wireless router to point the domain name (hosted on your Windows VM machine) to the IP address of your Windows VM (the IP you just setup).
• In Windows disable the Windows Firewall for Home and private networks
• Once the firewall is disabled add a new firewall rule to allow traffic on ports 80 and 443.
• On your Mac, open Terminal and ping the domain name that is being hosted from your Windows VM, you should get a near instantaneous reply
• Fire up whatever browser you want to test in on the Mac side and enter the domain name of the Windows VM hosted site.

Now you should be able to test sites between Mac and Windows, and thanks to the DNS services on your wireless router you can also visit the sites from any mobile device connected to your wireless network.