safari中审查网页元素并实时修改html/css需先启用开发者菜单：safari→偏好设置→高级→勾选“显示‘开发’菜单”；再用右键“检查元素”、快捷键option+cmd+i或“开发→显示网页检查器”打开；可双击编辑html文本、右键“编辑html”调整结构，双击css值或新增规则实时生效；所有修改仅限当前会话，刷新即还原。
在Safari浏览器中审查网页元素并实时查看修改后的HTML和CSS效果，是前端调试最基础也最关键的日常操作，不需要安装插件、不依赖网络、所有改动都在当前页面即时生效。
开启Safari开发者菜单
第一步：点击顶部菜单栏的「Safari」→「偏好设置」→ 切换到「高级」选项卡。
第二步：勾选底部的【在菜单栏中显示“开发”菜单】。这一步必须完成，否则后续所有审查功能都不可见——未勾选时右键菜单里既没有“检查元素”，也没有“开发”选项卡。
第三步：关闭偏好设置窗口，此时菜单栏最右侧会出现一个新增的「开发」菜单。
快速打开网页检查器
方法一：在任意已打开的网页空白处按住 Control 键再单击（即右键）→ 从上下文菜单中选择「检查元素」。
方法二：直接使用快捷键 Option + Command + I，瞬间唤出检查器面板。
方法三：点击顶部菜单栏「开发」→「显示网页检查器」。
实时编辑HTML结构
打开网页检查器后，默认停留在「元素」标签页。左侧是可折叠的DOM树，右侧是样式与属性面板。
双击任意HTML标签内的文本内容，即可直接编辑——比如把
首页
改成测试页
，页面标题立刻刷新。右键某个DOM节点，选择「编辑HTML」，能整块重写该元素及其子节点；删掉一个
注意：这些修改只存在于当前浏览器会话中，关闭标签页即清空，不会影响服务器上的真实源码。
动态调整CSS样式
在「元素」面板中，点击任一节点，右侧「样式」边栏会列出所有作用于它的CSS规则。
每条声明（如 color: #333;）都可以双击值部分直接修改，输入新颜色、字号或间距，页面实时响应变化。
点击某条规则末尾的复选框可临时禁用它，快速验证是否是该样式导致布局异常。
想新增一条样式？在「样式」边栏空白处单击，输入 property: value; 回车即生效，无需保存。
查看并复制修改后的源代码
在「元素」面板中所做的所有HTML编辑，都会实时反映在左侧DOM树上。
右键任意已修改过的节点 → 选择「复制」→「复制外层HTML」，就能把当前状态下的完整HTML片段粘贴出来。
若需获取整个页面当前渲染后的完整HTML（含JS动态插入的内容），可在「开发」菜单中选择「显示网页检查器」后，再点「文件」→「导出为 HTML」——这会生成一份包含全部实时变更的快照文件。
