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.
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.
Thanks very much for this post¡ it really helped me
Actually, this doesn’t work with Android devices. “.local” implies Bonjour, which Android devices do not use on a native basis.
Google has an equivalent of this, as of Android 4.0+ andChrome for Android:
https://developer.chrome.com/devtools/docs/remote-debugging
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.
I can’t make it work! :'(
Am I retarded?
Same here, can’t get it going even after reading a ton of Stack Overflow pages.
Works here on ios 11 and osx Sierra with iphone connected iva usb.
key things to note are :
Replace spaces with hyphens
end with .local at the end.
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