如何在Safari浏览器中通过开发菜单调试iPhone上的H5页面？

想在Mac上实时查看并修改iPhone Safari里打开的H5页面？HTML结构、CSS样式、Ja vaScript执行情况，统统都能现场调试。但前提是：两台设备必须建立可信连接，并开启调试通道。否则，Mac Safari开发菜单里根本不会出现你的iPhone设备名称——这一点，不少第一次折腾的人栽过跟头。

简单来说，整个流程分四步：Mac端开启开发菜单、iPhone端开启Web检查器、用认证线缆连接并信任、最后从Mac Safari的开发菜单里选择对应页面。每一步缺了都不行。

开启Mac端Safari开发菜单

打开Mac上的Safari浏览器，点击顶部菜单栏「Safari」→「偏好设置」，切换到「高级」选项卡，勾选「在菜单栏中显示“开发”菜单」。这一步不完成，后续所有操作都无从触发——因为「开发」菜单根本不会出现在顶部菜单栏里。别嫌麻烦，这是最基础的开关。

开启iPhone端Web检查器

方法一：基础配置
在iPhone上进入「设置」→「Safari浏览器」→「高级」，打开「Web检查器」开关。

方法二：增强兼容性（推荐同时开启）
在同一页面向下滚动，确保「Ja vaScript」也处于开启状态。很多H5页面依赖JS动态渲染，若此项关闭，页面可能白屏或交互失效，导致你误判为代码问题。这一点经常被忽略，但踩坑的人不在少数。

【Web检查器必须在“Safari浏览器”设置里开启，而不是“App内WebView”设置——后者无效】

建立设备连接并启动调试

第一步：用原装或MFi认证USB线将iPhone与Mac物理连接。别图省事用杂牌线，信号不稳定会导致设备识别失败。

第二步：iPhone首次连接时会弹出「信任此电脑」提示，必须点「信任」并输入锁屏密码。若跳过或点「不信任」，Safari开发菜单中永远看不到该设备。这个信任关系一旦建立，后续调试就省心多了。

第三步：在iPhone Safari中手动访问目标H5页面（例如 http://localhost:8080 或线上测试地址），确保页面已完全加载。别急着切回Mac，先让页面跑起来。

第四步：切回Mac Safari，点击顶部菜单栏「开发」，在下拉列表中找到你的iPhone设备名，展开后选择对应页面URL。此时会自动弹出Web检查器窗口，你可以立即切换到「元素」标签修改DOM、「控制台」查看报错、「网络」监控请求、「资源」浏览本地存储数据。调试效率直接拉满。