How can I test a website being developed locally from remote device (like an iPhone)?

I am developing a new WordPress theme and am doing this locally on my laptop using MAMP. On my laptop I can access the site at localhost:8800.

Is there a way I can visit this localhost site from my iPhone? I’d like to see what the theme looks like on mobile devices rather than just resizing my browser. Could this work if I make an ad hoc WiFi network between the two?

Related posts

Leave a Reply

4 comments

  1. Head over to this site (http://xip.io/) and in your vhost setup the following replacing the IP address with your local IP:

    #mysite.local
    <VirtualHost *:80>
     DocumentRoot "/Users/me/Sites/Development/mysite/www"
     ServerName mysite.local
     ServerAlias mysite.local.192.168.1.81.xip.io
      <Directory "/Users/me/Sites/Development/mysite/www">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
     </Directory>
    </VirtualHost>
    

    Then on your device head over to mysite.local.192.168.1.81.xip.io

  2. The easiest way is to connect your mac and iphone to the same WiFi network. Then get your IP address from System Preferences | Network. It will be shown in the status section and will probably look something like 10.10.5.100.

    Then on the iphone go to http://10.10.5.100:8800

  3. Assuming the iPhone is on the same network as the test server, just navigate to it’s IP address on your phone.

    EDIT: If you have multiple host names, then you can use DNSMasq. If you have a dd-wrt router, add the following lines to the ‘Additional DHCP Options’ box in the Services page – and make sure DNSMasq is enabled 🙂

    address=/dev/192.168.1.2
    interface=lo
    no-dhcp-interface=lo
    

    This will direct .dev domains to 192.168.1.2 – adjust to suit your own needs.