为什么需要远程调试?
在移动端开发中,直接在手机上查看 Console 日志往往不够直观。通过 Safari 的 Web Inspector 将 iOS 设备的日志同步到 Mac 上,不仅能实时看到 console.log 输出,还能检查网络请求、DOM 结构以及样式问题,效率会高很多。
准备工作
确保你有一台运行 macOS 的电脑和一个连接了 USB 数据线的 iPhone 或 iPad。系统方面,建议 iOS 设备为较新版本(iOS 6 以上均支持,但推荐 iOS 12+),Mac 端需使用 Safari 浏览器。
第一步:在 iOS 设备上开启 Web Inspector
默认情况下,这个功能是关闭的。你需要先在手机上打开设置:
- 进入 设置 > Safari。
- 滚动到底部,点击 高级。
- 找到 Web Inspector 选项,将其开关拨到'打开'状态。
这一步完成后,你的设备就具备了被调试的基础权限。
第二步:配置 Mac 端的 Safari
接下来需要在电脑上启用对应的调试菜单。保持 Safari 处于打开状态,按以下步骤操作:
- 点击菜单栏的 Safari,选择 偏好设置。
- 切换到 高级 标签页。
- 勾选底部的 在菜单栏中显示'开发'菜单。
注意这里不要选错,是'开发'菜单而不是其他名称。设置完成后,菜单栏顶部会出现一个新的'开发'入口。
第三步:连接并查看日志
用数据线将 iPhone 连接到 Mac。此时回到 Safari 的 开发 菜单,你应该能在下拉列表里看到已连接的设备名称。
选中设备后,再选择 显示 Web 检查器。如果当前 Safari 正在浏览某个网页,检查器会自动加载该页面的资源;如果没有,你可以手动输入 URL 打开页面。
打开检查器后,左侧面板包含了 Console、Network、Elements 等常用工具。切换到 Console 标签,你在手机上执行的操作产生的日志就会实时同步到这里。配合右侧的模拟器功能,还能预览不同屏幕尺寸下的表现。
小贴士
- 如果连接后没反应,尝试重新插拔数据线,或者检查一下信任此电脑是否已确认。
- Web Inspector 仅支持 Mac 平台,Windows 用户目前无法直接使用此原生方案。
- 调试结束后记得关闭检查器窗口,避免占用过多内存。


