Test Your Local Web Sites On Your iPad Or iPhone Using MAMP

Feb 12th 2013 · Permalink

With the rise of “all the devices” it’s important that you test your web sites in as many pertinent devices as possible. This can easily be done via a development or staging server, or via the iOS Simulator that comes with Xcode which is the way that we used to do it at Bold, that is until I learned this little trick that allowed me to test our projects right from my local machine on my iPad or iPhone (or any other device).

A note: the steps I’ll outline below involve using MAMP, so if you’re not using MAMP to serve your files locally, then this specific way won’t work for you, but I’m sure there are other ways to achieve the same effect.

All of your devices must be on the same network, usually a given, but worth pointing out. The idea here is that we setup the localhost on our desktop with the web site we’d like to view on our iPad or iPhone and then we point our iPad or iPhone to look at our computer. Below are the steps you can use to test your local sites on any mobile device.

Setup MAMP to point your localhost to your web site

If you are familiar with MAMP this is as easy selecting the directory where your web site lives on your machine.

image

Find our your local IP address

Go into your system preferences and under the Network option, see what your local IP address is. In this screenshot, you can see that mine is 192.168.55.135.

image

Point your iPad or iPhone web browser to your IP address

Type in the IP address that you got from step 2 into your mobile devices web browser.

You should now see your local project served up on your mobile device. While this is a handy little trick, it’s not entirely foolproof. If your web site or web app has absolute paths for example, you will discover that those pages won’t load because they will no longer be looking at your IP address, but instead the URL of the web site. Still, I’ve been using this trick now for a bit to test layouts and break points for which it works quite well.

Update: Tyler Hall who builds Virtual Host X posted a link on his blog how to achieve the same effects using his fantastic software.

← Previous Post Next Post →