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”:

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):

  • 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”:

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:

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):

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

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

--

--

The Tech Blog is written by developers, engineers, testers and many more from eBay Kleinanzeigen and mobile.de in Berlin. We build leading online platforms using the latest technologies and methods.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Patrick Hund

Software developer, cartoonist, electronic music producer. He/him.