Test locally hosted file on mobile devices

Debugging is the most painful, frustrating, and rewarding process of web development. Luckily we can test websites locally using software like Mamp, and see the sites in all browsers available in our environment so that we can find and polish all the rough edges before uploading them to a remote server.

Now you are probably wondering about testing in mobile devices. Is there a way to see your locally hosted files in IOS and Android devices? And the answer is yes, and it is more simple that you might think:

1) First of all, make sure that you are running your website from a local server using Mamp.
mamp

2) Check that your computer and mobile device are connected to the same Internet network.

3) Check your IP address. The easiest way to do this in Windows is to open your command prompt and type ipconfig. You’ll recognize your IP address right away.

cmdprompt

4) On a Mac, use the following path: System Preferences -> Network -> Wifi. You’ll see something like this:

ipmac

You can also use your terminal to get the IP of your computer. Just type ifconfig:

ifconfig

5) Confirm which port you are using to see your local files. Just open the Mamp WebStart page to see it.

port

6) With this information, type the following address into your mobile device:

http://ipAddress:port

In my case the url would be http://192.168.0.106:8888

If you have enabled the development tools in Safari you can also inspect the elements being rendered on your mobile devices.

And that is it. Enjoy!

Share on Facebook4Tweet about this on TwitterShare on LinkedIn3

Leave a Comment

Your email address will not be published. Required fields are marked *