Device testing

I’ve recently been working on a number of projects that have required a separate mobile site or fully responsive build. During development I tend to lean on resizing the browser window to quickly layout at different breakpoints. For testing for the iPhone/iPad I also use the iOS simulator that comes with XCode.

Nothing beats testing on a range of devices
Despite the ease of using a simulator, nothing beats testing on (a range of) real devices so here is a quick guide for broadcasting your local site to any mobile device. The only caveat is that both your local computer and mobile device must be connected to the same wifi network. 1. Grab your IP Address An easy way to do this is visit System Preferences > Network.

MAMP port settings
System Preferences > Network

Alternatively, via the command line you can get your ip details by running

ifconfig | grep inet
  1. Grab the port number that your local server is on I’m using MAMP Pro and it’s default is 8888 but in my case, it’s 80.
IP details
MAMP Port Settings
  1. Combine the two to get the URL to enter on your mobile device

    http:// + ip + : + port</code></pre> for example:

IP and port combined

  1. If you are using Wordpress, add a couple of things to your wp-config
<?php 
// Setup local host for viewing on other devices
define('SITEURL', 'http://192.168.254.10:80');
define('WP_HOME', 'http://192.168.254.10:80'); ?>
  1. You’re all set 6. If it didn’t work In my case, the localhost was set up correctly but the document root was pointing to /Applications/MAMP/htdocs: To fix this, I set up a new host in MAMP Pro that pointed to my local directory. After that, you should be all good to go.

If you hate email but still want to keep in touch, follow me on Twitter.

Guy Routledge avatar
Currently available hire me