首先启用Safari开发菜单：打开Safari → 设置 → 高级 → 勾选“在菜单栏中显示‘开发’菜单”；然后通过右键“检查元素”或开发菜单打开检查器，可查看HTML、CSS、控制台、网络及响应式设计；iOS调试需在设备开启Web检查器并连接Mac进行远程调试。
在 macOS 上使用 Safari 浏览器时，想要检查网页元素或调试网页代码，需要先启用内置的“开发者工具”。Safari 默认隐藏这些功能，需手动开启。以下是详细操作步骤。
启用 Safari 开发者菜单
要打开 Safari 的开发者工具，第一步是显示“开发”菜单：
- 打开 Safari 浏览器
- 点击顶部菜单栏的 Safari > 设置（或“偏好设置”）
- 切换到 “高级” 标签页
- 勾选底部的选项：“在菜单栏中显示‘开发’菜单”
完成这一步后，你会在 Safari 菜单栏看到一个名为“开发”的新菜单项。
打开网页检查器（检查元素）
启用开发菜单后，就可以使用检查元素功能了：
- 访问你想要检查的网页
- 右键点击页面任意元素，选择 “检查元素”
- 或通过菜单栏点击 开发 > 检查元素
此时会弹出 Web 检查器窗口，显示当前页面的 HTML 和 CSS 结构，可实时查看和修改样式、布局、脚本等。
常用开发者工具功能
Safari 开发者工具不仅限于查看元素，还包括多个实用功能：
- 元素检查：查看和编辑 DOM 结构与样式
- 控制台：运行 JavaScript、查看错误日志
- 网络分析：监控资源加载情况
- 响应式设计模式：模拟不同设备屏幕尺寸
这些工具对前端开发和网页调试非常有帮助。
iOS 设备上的 Safari 检查网页（进阶）
如果你需要在 iPhone 或 iPad 上调试移动网页，也可以通过 Mac 配合使用：
- 在 iOS 设备的 设置 > Safari > 高级 中开启“Web 检查器”
- 用数据线连接 iOS 设备与 Mac
- 在 Mac 的 Safari 开发菜单中，找到对应设备和网页标签页，点击即可远程检查
这一功能适合调试移动端网页布局和兼容性问题。
基本上就这些。只要启用“开发”菜单，Safari 的检查元素和开发者工具就能正常使用，操作简单但容易忽略设置入口。
