手机浏览器 Console 日志同步至电脑调试指南

为什么需要远程调试？

在移动端开发中，直接在手机上查看 Console 日志往往不够直观。通过 Safari 的 Web Inspector 将 iOS 设备的日志同步到 Mac 上，不仅能实时看到 console.log 输出，还能检查网络请求、DOM 结构以及样式问题，效率会高很多。

准备工作

确保你有一台运行 macOS 的电脑和一个连接了 USB 数据线的 iPhone 或 iPad。系统方面，建议 iOS 设备为较新版本（iOS 6 以上均支持，但推荐 iOS 12+），Mac 端需使用 Safari 浏览器。

第一步：在 iOS 设备上开启 Web Inspector

默认情况下，这个功能是关闭的。你需要先在手机上打开设置：

1. 进入 设置 > Safari。
2. 滚动到底部，点击 高级。
3. 找到 Web Inspector 选项，将其开关拨到'打开'状态。

这一步完成后，你的设备就具备了被调试的基础权限。

第二步：配置 Mac 端的 Safari

接下来需要在电脑上启用对应的调试菜单。保持 Safari 处于打开状态，按以下步骤操作：

1. 点击菜单栏的 Safari，选择 偏好设置。
2. 切换到 高级 标签页。
3. 勾选底部的 在菜单栏中显示'开发'菜单。

注意这里不要选错，是'开发'菜单而不是其他名称。设置完成后，菜单栏顶部会出现一个新的'开发'入口。

第三步：连接并查看日志

用数据线将 iPhone 连接到 Mac。此时回到 Safari 的 开发 菜单，你应该能在下拉列表里看到已连接的设备名称。

选中设备后，再选择 显示 Web 检查器。如果当前 Safari 正在浏览某个网页，检查器会自动加载该页面的资源；如果没有，你可以手动输入 URL 打开页面。

打开检查器后，左侧面板包含了 Console、Network、Elements 等常用工具。切换到 Console 标签，你在手机上执行的操作产生的日志就会实时同步到这里。配合右侧的模拟器功能，还能预览不同屏幕尺寸下的表现。

小贴士

• 如果连接后没反应，尝试重新插拔数据线，或者检查一下信任此电脑是否已确认。
• Web Inspector 仅支持 Mac 平台，Windows 用户目前无法直接使用此原生方案。
• 调试结束后记得关闭检查器窗口，避免占用过多内存。