网页检查器参考页面覆盖层

在检查任何页面的 DOM/CSS 时，第一步通常是在元素选项卡的DOM 树中找到特定的 DOM 节点。如果需要费力地在DOM 树中查找，这并不理想，尤其是在不熟悉页面结构的情况下。

网页检查器在被检查页面“上方”添加了一个页面覆盖层，提供辅助可视化效果，帮助开发人员了解整体页面结构，以及各种 CSS 属性（例如 margin、padding、border 等）的布局效果。

在网页检查器中的任何位置悬停在 DOM 节点上，页面覆盖层将显示该 DOM 节点的盒模型。

在元素选项卡中，详细信息侧边栏的样式面板中，悬停在任何 CSS 选择器上，将导致与该 CSS 选择器匹配的每个 DOM 节点以刚解释的方式被高亮显示。

颜色图例

• 外边距区域
• 边框区域
• 内边距区域
• 内容区域

元素选择

除了在网页检查器中悬停 DOM 节点或 CSS 选择器外，还有一种交互模式，可以为当前“在”光标（或手指，如果检查的是iOS 设备）“下方”的 DOM 节点显示相同的高亮效果。

这种模式，称为元素选择，可以通过两种方式进入：

• 开发 > 开始元素选择 (⇧ ⌘ C)

  注意：即使网页检查器未打开，也可以打开/关闭此功能。

• 位于选项卡栏中的[开始元素选择]按钮

通过任一方法切换元素选择将持续高亮显示 DOM 节点，直到元素选择关闭，或者您点击/轻触，这将显示元素选项卡的DOM 树中当前悬停的 DOM 节点。

覆盖层设置

您可以在页面覆盖层中启用页面标尺和节点边框线，以帮助您测量和对齐元素

标尺可以通过两种方式启用：

• 位于元素选项卡中的 [显示标尺]按钮

  这将导致页面标尺始终可见，无论元素选择模式是否启用。在元素选择期间，节点边框线也将显示。

• 位于设置选项卡的元素面板中的显示页面标尺和节点边框线复选框

  这将导致在元素选择期间显示页面标尺和节点边框线，即使元素选项卡中的 [显示标尺]按钮未启用。

高亮显示 CSS 选择器时也会显示节点边框线。