If you are a web developer building sites for mobile devices, testing how your CSS and JavaScript render on an actual iPhone is critical. While Safari on iOS is powerful, it lacks built-in developer tools. To properly debug a mobile website, you must connect your iPhone to your Mac and use the desktop version of Safari as a remote debugging terminal.
By default, this remote debugging capability (known as the Web Inspector) is completely hidden on both devices to protect average users. You must explicitly enable the developer menus on your Mac and your iPhone before they can communicate with each other over a USB cable.
How to Enable Safari Web Inspector for Remote Debugging
You must enable the hidden developer settings on both your Mac and your iOS device.
- On your iPhone/iPad: Open the Settings app, scroll down, and tap Safari.
- Scroll to the very bottom of the Safari settings and tap Advanced.
- Toggle the switch for Web Inspector so it turns green.
- On your Mac: Open the Safari browser.
- Click Safari in the top menu bar and select Settings…
- Click the Advanced tab at the far right of the settings window.
- At the very bottom, check the box labelled Show Develop menu in menu bar. Close the settings window.
- Connect your iPhone to your Mac using a USB-to-Lightning (or USB-C) cable. (Ensure your iPhone is unlocked and you have tapped “Trust This Computer” if prompted).
- On your iPhone, open Safari and navigate to the webpage you want to test.
- On your Mac, click the newly revealed Develop menu in the top menu bar.
- Look for the name of your iPhone in the drop-down list. Hover over it, and you will see the name of the webpage currently open on your phone. Click it.
A Web Inspector window will instantly open on your Mac. You can now inspect the DOM, modify CSS in real-time, and view console logs for the webpage currently running on your connected iPhone, making mobile web debugging incredibly easy.