I had a project at work that required inspecting a web page on an actual mobile device instead of in an emulator or simulator. I found a lot of other instructions on how to do this but most were outdated, complicated, or both. This is my attempt at a straightforward, visual walkthrough.

This was all done on iOS 13.5.1, macOS 10.15.5, and Safari 13.1.1.

On your iPhone, open the Settings app. Go to Safari and scroll down to Advanced. Enable Web Inspector.

Next, connect your iPhone to your Mac using your Lightning to USB cable. Open Safari on your Mac. If you don’t already have the Develop menu in your menu bar, open Preferences (⌘,) and in the Advanced tab, enable show Develop menu in menu bar.

With your iPhone connected to your Mac and unlocked, open the Develop menu. You should see your iPhone listed as a device. Mine is named 📱Pro Ⓜ️🅰️❎. Select Use for Development…

On your iPhone, trust your computer.

Open Safari on your iPhone (and go to a web page if you don’t already have one loaded). On your Mac in the Safari Develop menu under your iPhone, you should see the web page you have open on your iPhone. Hovering over the name of the page in the menu will highlight the page blue on your iPhone! 👌🏼

Selecting the page will open a Web Inspector on your Mac. You can now develop and debug just like on desktop. 🎉

Pro Tip

Before unplugging your iPhone from your Mac, enable Connect via Network. This will allow you to wirelessly inspect web pages on this device in the future.

Another tip for another time is accessing your local development servers on your iPhone (hint: mxb-mbp.local). Until then, happy debugging!