Web 检查器参考 元素选项卡

元素选项卡是检查页面 DOM 相关信息的主要来源。

DOM 树

主内容区域实时显示被检查页面的 DOM 可视化，与 HTML 行为和语义相匹配（例如折叠空白符）。

将鼠标悬停在任何 DOM 节点上，都会在页面叠加层中突出显示它。

DOM 节点可以通过拖动重新排序，支持双击编辑任何标签/属性/文本等，并且（编辑后）允许使用 Tab 键在可编辑内容之间切换。

如果 DOM 节点实际上未在检查页面中渲染，它将以灰度显示。这可以在设置选项卡的元素面板中禁用。

任何具有特别重要状态的 DOM 节点在开始标签后都会有小徽章

grid 徽章表示该 DOM 节点具有 CSS 网格布局。单击它将在页面叠加层中为该 DOM 节点切换CSS 网格叠加。
flex 徽章表示该 DOM 节点具有 CSS 弹性布局。单击它将在页面叠加层中为该 DOM 节点切换 CSS 弹性叠加。
事件徽章表示该 DOM 节点至少有一个 DOM 事件监听器。单击它将显示一个弹出窗口，列出该 DOM 节点的所有事件监听器，就像在节点面板中一样。
滚动徽章表示该 DOM 节点可滚动。

右键单击DOM 树中的任何 DOM 节点（包括不在元素选项卡中的节点）将显示一个上下文菜单，其中包含各种有用的操作，例如记录元素（将 DOM 节点保存到控制台中的变量）、添加/删除DOM 断点、切换 CSS 伪类、添加/编辑/复制/删除命令等等。

主内容区域的左上角显示从主文档元素到所选 DOM 节点的面包屑导航，方便快速选择相关 DOM 节点。

主内容区域的右上角也有一些开关

徽章允许选择在DOM 树中 DOM 节点旁边显示上述哪些徽章。
[显示标尺] 将在页面叠加层中启用页面标尺和节点边框线。
[强制打印媒体样式] 将使被检查页面认为正在打印，这将导致任何 @media print CSS 生效。
[覆盖用户偏好设置] 显示一个弹出窗口，其中包含用于覆盖用户颜色方案、减少运动和增加对比度偏好设置的控件。在 Web 检查器打开时，这些覆盖会保留在被检查页面上。

[显示合成边框] 将绘制边框并指示每个图层的重绘次数，就像在图层选项卡中一样。
[启用绘制闪烁] 将使图层在重绘时短暂闪烁红色，就像在图层选项卡中一样。

详情侧边栏

样式面板按 CSS 选择器特异性和 DOM 节点继承来组织应用于DOM 树中所选 DOM 节点的 CSS。

默认情况下，如果 Web 检查器足够宽以同时显示更多信息，则样式面板会分拆为单独的列。这可以通过设置选项卡的元素面板中的“显示独立样式侧边栏”复选框启用。

除非另有说明，每个 CSS 规则集的所有部分都是可编辑的，包括 @media、@supports、@container 和类似 CSS @规则的条件文本。无效声明会以黄色突出显示，并附带一个简要解释原因的工具提示。为 CSS 属性和相关的关键字/函数值提供自动补全功能。通过单击附近的图像可以显示各种 CSS 声明值的专用编辑器（例如颜色/渐变样本，[编辑“cubic-bezier”函数],[编辑“box-shadow”] 等）。

默认情况下，已声明或继承但未在匹配样式中使用的 CSS 自定义属性（也称为 CSS 变量）处于隐藏状态。要显示它们，请单击按钮显示未使用的 CSS 变量。

CSS 选择器将把DOM 树中与所选 DOM 节点不匹配的任何部分（或继承 CSS 规则集情况下的祖先）灰显。单击 CSS 选择器旁边的图标将显示一个包含各种有用操作的上下文菜单。
- 作者样式表 CSS 规则集
- CSS 伪元素的作者样式表 CSS 规则集
- 用户样式表 CSS 规则集
- CSS 伪元素的用户样式表 CSS 规则集
- 用户代理样式表 CSS 规则集
- CSS 伪元素的用户代理样式表 CSS 规则集
- 检查器样式表 CSS 规则集
- 检查器样式表 CSS 伪元素的 CSS 规则集
- 继承的 CSS 规则集
- DOM style 属性 CSS 声明块
- 继承的 DOM style 属性 CSS 声明块
可以通过点击左下角的 [添加新规则] 创建新的 CSS 规则集。默认情况下，它们将被添加到检查器样式表（如果不存在则会创建），但也可以通过右键单击添加到任何现有样式表。这些 CSS 规则集（和检查器样式表）在导航或 Web 检查器会话之间不会保留。

右下角的类按钮控制一个显示所选 DOM 节点在DOM 树中所有 CSS 类的架子，提供了用于快速切换每个类的复选框以及用于添加新 CSS 类的输入框。
计算面板可视化 CSS 盒模型，并列出DOM 树中所选 DOM 节点的每个 CSS 属性的计算值。

默认情况下，属性部分将仅显示已由应用于DOM 树中所选 DOM 节点的 CSS 规则集修改的 CSS 属性。这可以通过单击[筛选] 更改为显示所有未修改/继承的 CSS 属性和/或首选简写（如果可能）。

CSS 变量被分拆到一个单独的变量部分，以避免使属性部分变得混乱。您可以将它们取消分组，全部放在一个部分中，或按值类型（颜色、尺寸、数字和其他）分组到单独的部分中。
布局面板列出在检查页面上充当 CSS 网格和 Flexbox 容器的节点，并提供控件来切换每个节点的专用页面叠加层，例如CSS 网格叠加层。

要更改每个页面叠加层的颜色，请使用布局面板中列出的相应节点旁边的颜色样本。

CSS 网格页面叠加层可以通过一组选项进行配置
- 轨道尺寸： 显示一个标签，其中包含用户编写的轨道尺寸值，如果未明确设置，则为自动。这有助于通过将 CSS 中用户编写的值与页面上相应的网格轨道匹配来进行视觉检查。
- 行号： 显示一个标签，其中包含显式网格线的序数和逆序数。逆序数在从末尾向后引用行时很有用。例如，1 -4 表示“第一个和倒数第四个”。
- 行名称： 显示一个标签，其中包含网格线的用户定义名称或从网格区域名称派生的隐式网格线名称。
- 区域名称： 显示一个标签，其中包含一组单元格的用户定义名称。
- 扩展网格线： 将网格线在其各自方向上无限延伸。
可以配置Flexbox 页面叠加层，使弹性项目显示对应于 DOM 中隐式顺序或使用 order CSS 属性值设置的显式顺序的序号。

点击网格或 Flexbox 部分标题中的 [选项] 图标，可以一次性切换所有该类型的专用页面叠加层。
字体面板显示有关DOM 树中所选 DOM 节点主字体的信息，提供基本属性（例如大小、样式、粗细等）和高级属性（例如连字、替代字形、变体等）的计算值。

当所选 DOM 节点上的主字体是可变字体时，字体面板会显示其变体轴的编辑控件。对于每个轴，它显示轴标签（一个 4 字符标识符）、一个可选的轴标签、一个带有支持值范围的滑块控件，以及一个带有当前轴值的输入字段。当输入字段处于焦点时，按住键盘上的向上或向下箭头键以精确的步长增加或减少值。按住 Shift 或 Option 键可更改步长的幅度。

使用控件更改变体轴会将值写入所选 DOM 节点的行内样式中对应的 CSS 属性，以便您可以在被检查页面上实时查看结果。
更改面板列出针对DOM 树中所选 DOM 节点或被检查页面中所有样式的已修改 CSS 声明，这取决于设置选项卡的元素面板中的“仅显示所选节点设置”复选框。
节点面板包含DOM 树中所选 DOM 节点的属性、可访问性数据、JavaScript 事件监听器（包括祖先）和 JavaScript 对象继承的更详细表示。
图层面板与图层选项卡中的所有图层面板类似，都显示每个图层的基本信息，但其范围仅限于DOM 树中所选的 DOM 节点及其后代。