How to view “localhost” using your iPhone or iPad

When doing responsive design you want to test the changes made on your iPhone the same way you test it in your browser, by browsing to localhost.

But how can I access the localhost on my Mac? It’s quite easy, you need to enter the name of your Mac in the URL.

localhost

For example in my case I need to enter http://Andreas-MacBook-Pro.local as the URL in Safari on my iPhone.

That’s it! No more need of uploading HTML files to remote web servers in order to test the HTML and CSS.

Note

I’ve only tried this on iPhone and iPad but I guess it will work on Android devices as well.

Thoughts and comments

  1. This won’t be enough if your local test site is one of several virtual hosts.

    If you are testing a vhost you have to set up your local machine as the proxy for your mobile device. The means by which to do this vary by device and can’t always be done on some devices (on some ipads for example).

    In some cases you can set up a software proxy from your webserver and connect your idevice to it.

  2. You need to add the port if you have one.

    For Example. On my desktop where I host the application I go to localhost:3000 to view the website.
    My Desktop’s computer name = justin-pc

    Make sure The Mobile device is on the SAME NETWORK as the desktop that is serving the application.

    For Android devices I would go to:
    justin-pc:3000

    For iPhone I go to:
    justin-pc.local:3000

Share your thoughts on this

Your email address will not be published.