How to inspect Safari on iOS from your Mac

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.

Enable Web Inspector on your iPhone

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.

Enable Develop menu in Safari on macOS

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…

Use your iPhone for development

On your iPhone, trust your computer.

Trust your Mac

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! ๐Ÿ‘Œ๐Ÿผ

Select the page on your iPhone to inspect

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

Web page on iPhone being inspected on Mac

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!

How to inspect Safari on iOS from your Mac

Leave your thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s