必须同时开启Mac Safari的“开发”菜单和iOS的“Web检查器”开关才能调试:1. Mac端在Safari偏好设置→高级中勾选“在菜单栏中显示‘开发’菜单”;2. iOS端在设置→Safari→高级中开启“Web检查器”。

你需要在 Mac 上实时查看并修改 iPhone Safari 中打开的网页 DOM 结构、控制台日志或网络请求,但 Safari 顶部菜单栏里找不到“开发”选项,设备列表也始终为空——这说明 macOS 和 iOS 两端的调试通道尚未打通,必须同步完成两处关键开关设置才能建立连接。
在 Mac 的 Safari 中启用“开发”菜单
这一步是整个调试流程的入口前提,没有它,“开发”菜单根本不会出现在菜单栏,后续所有设备识别和检查器调用都无从谈起。
1、点击屏幕左上角 Safari → 偏好设置(macOS Sequoia 及更新系统中显示为“设置”)。
2、切换到“高级”标签页,向下滚动到底部。
3、勾选【在菜单栏中显示“开发”菜单】。这个选项一旦启用,Safari 重启后菜单栏就会在“书签”右侧固定出现“开发”项。
4、关闭设置窗口,确认“开发”已出现在菜单栏中。如果没看到,请检查是否误点了其他标签页,或系统语言设置导致选项文字被截断。
在 iOS 设备上开启 Web 检查器
仅 Mac 端开启还不够,iOS 必须主动授权 Web 检查器服务运行,否则 Mac 根本无法发现该设备,更别提列出其打开的网页标签页。
方法一:直接路径操作
进入 iPhone 或 iPad 的“设置”→“Safari 浏览器”→“高级”,将【Web 检查器】开关置为开启(绿色)。
方法二:快捷搜索直达
在设置首页顶部搜索框输入“web 检查器”,系统会直接定位到该开关,点击开启即可。
⚠️ 注意:此设置仅对 Safari 浏览器内打开的网页生效;若网页是嵌入在 App 的 WebView 中,则需开发者额外启用 WebKit 调试支持,本设置无效。
建立连接并启动 Web 检查器
两端设置就绪后,连接与调试需严格遵循物理连接→页面加载→菜单选取的顺序,任意环节错位都会导致目标网页不出现。
第一步:用 USB 数据线将 iOS 设备连接至 Mac,并在 iOS 弹出“信任此电脑?”提示时点击“信任”。
第二步:在 iOS 设备上,用 Safari 打开你要调试的目标网页,确保该标签页处于前台激活状态(非后台、未被切换走)。
第三步:回到 Mac,打开 Safari,点击顶部菜单栏“开发”→悬停在你的设备名称上→在子菜单中找到对应网页标题,点击它。
第四步:Web 检查器面板自动弹出,默认停留在“元素”标签页。点击左上角选择图标(箭头+方框),即可在 iPhone 屏幕上实时悬停高亮 DOM 元素。
这一步操作起来很简单,直接点击就能触发,但前提是前三步全部准确完成;若点击后无反应,请立即检查 iOS 是否真的在 Safari 中打开了该网页,而不是从微信、钉钉等第三方 App 内嵌浏览器跳转——那些环境无法被 Safari 开发菜单识别。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











