Safari Remote Debugging for iPhone: Web Inspector and Develop Menu

Post author: Nanfeng
Post link: <a href="https://lengmo714.top/en/1369ddb7.html" title="Safari Remote Debugging for iPhone: Web Inspector and Develop Menu">https://lengmo714.top/en/1369ddb7.html
Copyright Notice: All articles in this blog are licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"> BY-NC-SA unless stating additionally.

In Frontend Development

Remotely debug an iPhone Safari page from a Mac by enabling Web Inspector, connecting the device, opening Safari's Develop menu, selecting a tab, and using console and network tools.

A previous article covered debugging a mobile web page with Chrome. This guide explains how to debug a page open in Safari on an iPhone.

Remote Debugging Requirements

You need both a Mac and an iPhone. This workflow is not available from a Windows computer.

Inspect an iPhone Safari Tab from a Mac

Enable Web Inspector on the iPhone. Open Settings → Apps → Safari → Advanced, then turn on Web Inspector.
Open Safari on the Mac and use the Develop menu as shown below:

The target page must also be open in Safari on the iPhone; otherwise it will not appear in the Mac’s Develop menu.
Select the web page you want to inspect. Safari opens its developer tools: