Local web development and cross-browser testing with MAMP/VirtualBox and all browsers IE/Firefox/Safari/Opera/iPhone/iPad

Here is the process for installing MAMP Pro and all version of Internet Explorer and Windows. that means you can test your site on possible browser combinations including IE, Firefox, Safari, Opera, iPhone, iPad.

First get MAMP Pro and setup a site on your Mac:

  1. Download and install MAMP Pro
  2. Set up a host name e.g. design.me
  3. Add an index.html file and test it by browsing to design.me

Then get VirtualBox and download 3 different versions of Windows and IE (learned here):

  1. Download and install VirtualBox
  2. Launch the Terminal
  3. Decide which version of IE you want, or download all. Each one is installed as a separate VM. This step takes a very long time!
    • Install ALL versions of Internet Explorer: IE7, IE 8, and IE 9

      curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | bash
    • Install Internet Explorer 7 Only

      curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="7" bash
    • Install Internet Explorer 8 Only

      curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | IEVMS_VERSIONS="8" bash
    • Install Internet Explorer 9 Only

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

The password for each Windows installation is “Password1”.

First install Guest Additions via the Virtualbox menu option DEVICES > Install Guest Additions. You might have to reboot after that.

Now, run any instance of windows and edit the host file so you can browse to your MAMP sites:

  1. Open c:/Windows/System32/drivers/etc/host file
  2. Add an entry “10.0.2.2 design.me
  3. Save the file
  4. Open command line and type “ipconfig/flushdns
  5. Open Internet Explorer and browse to your site
  6. Repeat for each site (and on each VM)

Now get all other browsers you want on any platform:

  • Get iPhone SDK (you might need a developer account) and open “iOS Simulator
  • Get Opera.
  • Get Chrome.
  • Get Firefox.
  • Get Safari.