先说几个核心判断：想在 Safari 中快速定位按钮样式错位的原因，或者确认某个 API 请求到底有没有发出去，就必须直接看到当前页面的 HTML 结构和网络行为。但默认状态下，这些功能全部隐藏。下面直接说怎么开、怎么用。

启用“开发”菜单（所有操作的前提）

这一步真的别跳过。没勾选那个选项，后续所有源码与调试功能都无法调用。这不是 bug，是 Apple 的设计如此。

• 第一步：点击屏幕左上角的 Safari 菜单 → 选择「设置」（旧系统里叫「偏好设置…」，效果一样）。
• 第二步：切换到顶部标签栏中的「高级」页签（图标是个齿轮，通常在靠右位置）。
• 第三步：往下滚到底部，必须勾选“在菜单栏中显示‘开发’菜单”。勾完之后不用重启，“开发”两个字会立刻出现在菜单栏“书签”和“窗口”之间。

查看完整 HTML 源代码

这个方法适用于需要通读原始 HTML、复制整页结构、或者验证服务端渲染结果的场景。看到的就是服务器返回的原始字节流，不含 JavaScript 动态插入的内容。

方法一：菜单路径

确保目标网页已经完整加载并处于前台标签页。然后点击菜单栏「开发」→ 在下拉列表里找到当前域名（比如 github.com 或者 localhost:8080）→ 点击子菜单中的「显示页面源代码」。

方法二：快捷键

按下 Option + Command + U 就行。注意：前提是“开发”菜单已经启用，否则这个组合键没反应。

方法三：右键上下文菜单

在网页正文区域按住 Control 键并点击（触控板用户双指轻点），从弹出菜单中选择「显示页面源代码」。如果这个选项不见了，说明网页通过 JavaScript 禁用了右键事件，这时候退一步用快捷键或者菜单法。

检查实时 DOM 与调试交互逻辑

当你需要分析 Vue 组件挂载后的结构、查看 AJAX 返回的 JSON 数据、监听按钮点击事件绑定情况时，得用下面这套方法。它展示的是浏览器最终渲染的、可交互的 DOM 树，而不是原始 HTML。

第一步：打开 Web 检查器

确保「开发」菜单已启用。在网页任意位置右键（或触控板双指轻点）→ 选择「检查元素」。检查器面板会从右侧或底部展开，默认高亮鼠标悬停处对应的 HTML 节点。

第二步：切换到网络请求面板

在检查器顶部标签栏中点击「网络」（Network），然后刷新网页（Command + R）。所有 HTTP/HTTPS 请求就会逐条列出来。点击任一请求行，在右侧的「标头」或「响应」标签中，可以查看原始请求报文、返回的 JSON 或 HTML 片段。

特别注意：Safari 不提供“查看请求源码”的独立按钮，必须通过选中具体请求后展开其详情才能看到。

第三步：在控制台执行调试命令

切换到「控制台」（Console）标签页。输入 document.querySelector('button#submit') 回车，就能即时获取指定元素对象。对返回结果点开 展开，还能查看它绑定的事件监听器、计算属性以及当前样式的值。

《夸克》非常好用的免费AI浏览器

下载APP查看