DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Patrick Hund
Patrick Hund

Posted on

Testing Web Applications Running on Localhost With an iPhone

I recently switched from an Android phone to an iPhone and discovered that it is so much easier to test my web application running on localhost on my MacBook with my new phone.

Here are the steps to make it work.

On the iPhone, go to Settings β†’ Safari β†’ Advanced and activate the switch β€œweb inspector”:

Switching on β€œweb inspector”

Connect the phone to your MacBook using a lightning-to-USB cable.

On the MacBook, open up Safari and make sure you have the β€žDevelop menuβ€œ activated (most web developers will have done this already):

  • Pull down the β€œSafari” menu and choose β€œPreferences”
  • Click on the β€œAdvanced” tab
  • Check the box next to β€œShow Develop menu in menu bar”

Then go to Develop β†’ NAME_OF_YOUR_IPHONE and select β€œConnect via Network”:

Selecting the iPhone in Safari

Open up a terminal and run the command β€œifconfig” to see the list of current network interfaces and take note of the IP address of the last entry in the list:

Running ifconfig to find IP address

On your phone, in Safari, use the IP address to access your locally running website. For example, if you use create-react-app, instead of going to http://localhost:3000, with the IP I got here, the address to use is http://169.254.145.56:3000 (don’t forget the http:// prefix):

Local host webapp on your phone

You can now inspect the website displayed on your iPhone with your MacBook’s Safari by selecting it in the Develop menu:

Inspecting the website

This will open up a Web Inspector window that allows you to look at the DOM, styles and console log from your iPhone:

Alt Text


This article originally appeared on the eBay Tech Berlin blog.
Join our team – we are hiring!

Top comments (0)

Dream Big


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category.

β†’ Join the Hackathon <-