Test localhost on an iPhone, with Safari's Web Inspector

To test localhost on an iPhone, open your Mac's network address in Safari on the same Wi-Fi, or scan a link's QR code with the camera. Then debug the page from the Mac with Safari's Web Inspector, over a cable or the network. This guide covers both halves: getting the page onto the phone, and seeing its console and requests from your desk.

It is written for an iPhone and a Mac. For any phone, see how to open localhost on your phone; if the phone can't connect at all, go through the six checks; for Android, see testing localhost on Android.

1. Open the site on the iPhone

Over your Wi-Fi

Start the dev server so it listens on the network, not only on localhost (the flag for each dev server). Then type the Mac's address and port into Safari, like http://192.168.1.20:5173.

A Mac also has a name the iPhone can use, which stays the same when the address changes. Apple explains it:

You'll find yours in System Settings > General > Sharing, at the bottom, and http://Studio-MacBook.local:5173 works too, with one catch. Vite's docs say “localhost and domains under .localhost and all IP addresses are allowed by default.” A .local name is neither, so Vite answers Blocked request. Use the IP address with Vite, or add the name to server.allowedHosts.

Typing a long address on a phone is slow. With Universal Clipboard, “you can copy a URL on your Mac and paste it into Safari on your iPhone”. It needs Wi-Fi, Bluetooth and Handoff on, on both, and the same Apple Account.

With a link and a QR code

When the phone is on another network, or the page needs https, give the dev server a public link instead. ouicu prints it as a QR code in your terminal:

ouicu share 5173

On the iPhone: open Camera, keep the code inside the frame in Photo mode, and tap the link that appears. The Scan Code control in Control Center works too. The page opens over https, on Wi-Fi or mobile data, and your dev server sees each request as coming to localhost, so its host settings stay as they are. On Free, the phone shows a short notice from ouicu first, once a week per share.

2. Inspect it from your Mac

The developer tools for Safari on an iPhone run in Safari on a Mac, and both ends start switched off:

1. On the iPhone, open Settings > Apps > Safari > Advanced, then turn on Web Inspector.
2. On the Mac, choose Safari > Settings > Advanced, then check Show features for web developers.
3. Connect the iPhone to the Mac with a cable and unlock it. “You may need to trust the Mac you connect your device to when the device prompts you before it appears in the Develop menu on your Mac.”
4. In Safari on the Mac, open the Develop menu, then your iPhone, then the page. Web Inspector opens in a window of its own.

From there you have the console, the network requests and the elements of the page on the phone. While inspecting a connected device, you can also override the user agent and turn off cross-origin restrictions. Running service workers and Home Screen web apps can be inspected too.

Without the cable

After one connection by cable, Connect via Network in the phone's Develop submenu works over Wi-Fi. That suits a phone on a stand across the desk. Web Inspector looks at whatever Safari has open, so a page opened from a ouicu link is inspected the same way as one on your Wi-Fi address.

3. Or start in a simulator

For a first pass at other screen sizes, the iOS simulators come with Xcode, free in the Mac App Store. Then Open Page With, in the Develop menu of Safari on the Mac sends the page you're on to one, and Apple's docs add: “Web Inspector is always enabled for simulators, and currently booted simulators will appear in the Develop menu just like connected devices.”

Finish on a real iPhone, though:

When something on the iPhone fails

• Safari can't open the page, or waits and gives up: the address, the dev server's network setting, the Wi-Fi or the Mac's firewall. The six checks go through them in order.
• The page loads, but the camera, location or a service worker doesn't work: those need a secure context, meaning https or localhost, whose addresses are 127.0.0.0/8 and ::1/128. A Wi-Fi address over http is neither; the link is https.
• Vite says Blocked request on a .local name: use the IP address, as above.

Questions

Can I open localhost on an iPhone without Wi-Fi?

Yes, with a public link: it opens on mobile data, and the cable stays free for Web Inspector.

Do I need a Mac to inspect Safari on an iPhone?

Apple's docs describe Safari on a Mac, by cable, or over the network once the two have met by cable. Without a Mac, show what you need to see on the page itself.

How do I test other iPhone sizes?

Start the simulators from Xcode, open the page from Safari's Develop menu, then check the result on one real phone.