需启用iPhone Web检查器并配置Mac Safari开发者工具:一、iPhone设置中开启Safari高级里的Web检查器;二、Mac Safari偏好设置中启用“开发”菜单;三、USB连接已信任且解锁的iPhone;四、Mac Safari“开发”菜单下选择设备及网页启动检查器;五、通过检查器实时编辑DOM、执行JS、监控网络等。

如果您希望在Mac上远程调试iPhone上Safari浏览器中打开的网页,需启用iOS设备的Web检查器并配置Mac端的Safari开发者工具。以下是实现该调试流程的具体步骤:
一、在iPhone上启用Web检查器
Web检查器是iOS Safari提供的内置调试功能,必须手动开启才能被Mac识别并建立远程调试连接。
1、在iPhone上打开“设置”应用。
2、向下滚动并点击“Safari”。
3、点击“高级”选项。
4、将Web检查器右侧的开关拨至开启状态。
二、在Mac上启用Safari开发者菜单
Mac端Safari默认隐藏开发者菜单,需通过偏好设置启用,否则无法访问“开发”菜单栏及设备列表。
1、在Mac上打开Safari浏览器。
2、点击顶部菜单栏中的“Safari”,选择“偏好设置”。
3、切换到“高级”标签页。
4、勾选在菜单栏中显示“开发”菜单复选框。
三、建立Mac与iPhone的物理连接并识别设备
Safari远程调试依赖USB连接传递调试协议,Wi-Fi连接不支持此功能;设备需已信任Mac且处于解锁状态。
1、使用原装或MFi认证Lightning或USB-C数据线将iPhone连接至Mac。
2、在iPhone屏幕上出现“信任此电脑?”提示时,点击信任并输入锁屏密码。
3、确保iPhone屏幕保持解锁且Safari已至少打开一个网页标签页。
四、在Mac Safari中定位并打开iPhone网页的检查器
连接成功后,Mac Safari的“开发”菜单会动态列出已连接的iOS设备及其当前打开的网页标签页,可直接启动实时调试界面。
1、在Mac Safari顶部菜单栏点击“开发”。
2、在下拉菜单中找到以您iPhone型号命名的子菜单项(例如“iPhone (16.5)”)。
3、在其子菜单中,点击正在运行的网页对应标题(如“https://example.com”)。
4、此时将自动弹出Web检查器窗口,显示该页面的HTML结构、控制台输出、网络请求及样式规则等。
五、使用Web检查器进行实时调试操作
检查器窗口提供完整的前端调试能力,支持DOM编辑、断点设置、JavaScript执行与响应式模拟,所有操作实时反映在iPhone屏幕上。
1、在检查器左侧元素面板中,点击任意HTML节点可高亮其在iPhone页面中的对应区域。
2、双击元素的属性值(如class或style),可直接编辑并即时生效。
3、切换至“控制台”标签页,输入JavaScript代码并回车,执行结果将在iPhone页面上下文中运行。
4、在“网络”标签页中刷新iPhone页面,即可捕获全部HTTP请求及其状态码、响应头与资源大小。










