必须先启用Safari的“开发”菜单：打开Safari→设置→高级→勾选“在菜单栏中显示‘开发’菜单”，若未出现则需终端执行defaults write com.apple.Safari IncludeDevelopMenu -bool true并重启；启用后可通过Option+Cmd+I、右键“检查元素”或“开发→显示Web检查器”调出检查器。
要在Mac上用Safari调试网页HTML结构、CSS样式或JavaScript行为，必须先让“开发”菜单在菜单栏中可见，否则所有检查器、网络面板、控制台等功能入口都不存在。
启用Safari菜单栏中的“开发”菜单
这是整个调试链路的起点，没有这一步，后续所有操作都无法触发。菜单栏不显示“开发”，你就连右键“检查元素”都不会出现。
1、点击屏幕左上角的 Safari → 设置（旧版系统显示为“偏好设置”）。
2、切换到「高级」标签页，图标是齿轮状，通常在最右侧。
立即学习“前端免费学习笔记（深入）”；
3、滚动到底部，勾选「在菜单栏中显示“开发”菜单」。【务必确认勾选状态已保存】，若关闭设置后菜单栏仍未出现“开发”，说明配置未生效，需用终端命令强制写入。
4、关闭设置窗口，立即查看菜单栏：确认“开发”已出现在“书签”与“窗口”之间。
快速打开Web检查器的三种方法
开启“开发”菜单后，你有多个路径直达核心调试界面——Web检查器。它能实时查看DOM树、编辑样式、监控网络请求、执行JS代码。
方法一：快捷键调出
在任意已加载的网页页面，按下 Option + Command + I，检查器窗口立刻弹出并聚焦在元素面板。
方法二：右键精准定位
在网页任意位置右键单击（触控板双指轻点也可），从上下文菜单中选择「检查元素」。这会直接高亮并选中你右键处对应的HTML标签，对分析商品列表、表单字段等特别高效。
方法三：菜单导航
点击顶部菜单栏的「开发」→「显示 Web 检查器」。注意：如果下拉菜单里没有该选项，说明当前网页未完全加载，或页面被iframe隔离，可尝试刷新后重试。
真机调试前必须完成的iOS端授权
如果你要调试iPhone或iPad上Safari打开的网页，仅Mac端开启“开发”菜单远远不够。iOS设备必须主动开启Web检查器权限，并完成USB信任，三者缺一不可。
第一步：在iOS设备上开启Web检查器
进入「设置 → Safari → 高级」，将「Web检查器」开关滑动至开启（绿色）。
第二步：用USB数据线连接Mac
连接后，iOS设备会弹出“信任此电脑？”提示，必须点击“信任”。未点信任，Mac端“开发”菜单里根本不会列出设备名，更无法选择页面标签启动远程检查器。
第三步：在Mac端验证设备可见性
确保Safari处于前台，点击菜单栏「开发」，向下滚动查看是否出现你的设备名称（如“张三的iPhone”）。若未出现，请重新拔插USB线、重启iOS设备、或检查Mac端是否已安装最新Xcode命令行工具。
