首先启用Safari开发者模式，依次进入Safari设置→高级→勾选“在菜单栏中显示开发菜单”，随后可通过开发菜单使用网页检查器、响应式设计模式及远程调试功能进行页面调试与元素查看。
如果您在使用Safari浏览器进行网页调试或查看页面元素时发现缺少相关工具，可能是因为开发者模式尚未启用。Safari默认隐藏了开发者相关的功能选项，需要手动开启才能使用。
本文运行环境：MacBook Pro，macOS Sonoma
一、启用Safari开发者菜单
开启开发者菜单是使用Safari调试功能的前提，该菜单包含网页检查器、响应式设计模式等开发工具。
1、打开Safari浏览器，点击顶部菜单栏中的Safari，选择设置（或偏好设置）。
2、切换到高级标签页。
3、勾选底部的选项：“在菜单栏中显示开发菜单”。
4、关闭设置窗口，此时菜单栏会出现开发选项，表示开发者模式已成功开启。
二、使用网页检查器查看页面元素
网页检查器允许您实时查看和修改HTML与CSS代码，便于前端调试。
1、访问目标网页后，点击顶部菜单栏的开发。
2、在下拉菜单中选择显示网页检查器，或使用快捷键Option + Command + I。
3、右侧将弹出元素面板，可点击左上角的选择图标，然后在页面上选取特定元素进行查看。
4、在检查器中可以直接编辑HTML结构或CSS样式，更改会即时反映在页面上。
三、启用响应式设计模式
响应式设计模式用于模拟不同设备屏幕尺寸，测试网页在移动端的显示效果。
1、确保开发者菜单已启用。
2、点击开发菜单，选择进入响应式设计模式。
3、页面上方会出现控制栏，提供预设设备分辨率或自定义尺寸。
4、拖动边框或输入具体数值调整视口大小，观察布局变化。
四、远程调试iOS设备上的网页
通过USB连接，可在Mac上调试iPhone或iPad中Safari加载的网页内容。
1、使用数据线将iOS设备连接至Mac电脑。
2、在iOS设备的设置 > Safari > 高级中开启Web检查器。
3、在Mac端Safari的开发菜单中，找到已连接设备名称。
4、展开设备列表，选择正在浏览的网页标签，即可打开检查器进行调试。
