徽章参考

借助元素面板中的这一综合性标记，您可以切换各种叠加层并加快 DOM 树导航的速度。

显示或隐藏徽章

如需显示或隐藏徽章，请按以下步骤操作：

1. 打开开发者工具。
2. 右键点击 DOM 树中的某个元素，然后选择 Badge settings...。
3. 选中或清除所选徽章旁边的复选框。

元素面板会在 DOM 树中的相应元素旁边显示选中的标记。后续部分将介绍每种徽章。

网格

如果 HTML 元素的 display CSS 属性设置为 grid 或 inline-grid，则该元素就是网格容器。此类元素旁边有 grid 标志，用于切换相应的叠加层。

开启/关闭以下预览中的叠加层：

1. 在预览中检查相应元素。
2. 在 DOM 树中，点击元素旁边的 grid 标记并观察叠加层。

叠加层会显示列、行、编号和间隔。

如需了解如何调试网格布局，请参阅检查 CSS 网格。

子网格

子网格是使用与其父网格相同的轨道的嵌套网格。如果某个元素的 grid-template-columns 和 grid-template-rows 属性设置为 subgrid，则该元素就是一个 subgrid 容器。此类元素旁边有 subgrid 标志，用于切换相应的叠加层。

开启/关闭以下预览中的叠加层：

1. 在预览中检查相应元素。
2. 在 DOM 树中，点击元素旁边的 subgrid 标记并观察叠加层。

叠加层会显示子网格的列、行、编号和间隔。

Flex

如果 HTML 元素的 display CSS 属性设置为 flex 或 inline-flex，则该 HTML 元素属于灵活容器。此类元素旁边有 flex 标志，用于切换相应的叠加层。

开启/关闭以下预览中的叠加层：

1. 在预览中检查相应元素。
2. 在 DOM 树中，点击元素旁边的 flex 标记并观察叠加层。

叠加层会显示子元素的位置。

如需了解如何调试 Flex 布局，请参阅检查和调试 CSS Flexbox。

Ad

开发者工具可以检测一些广告框架并对其进行标记。此类画面旁边会显示 ad 标志。

在以下预览中发现广告：

1. 在预览中检查相应元素。
2. 在 DOM 树中，找到一个旁边带有 ad 标志的元素。

ad 标记不可点击，但您可以使用呈现标签页以红色突出显示广告框架。

滚动贴靠

如果 HTML 元素的 overflow CSS 属性设置为 scroll，则该元素就是滚动容器；如果有足够的内容导致溢出，则该元素就是 auto。滚动容器可以具有用于配置贴靠点的 CSS 属性。此类元素旁边有 scroll-snap 标志，用于切换相应的叠加层。

开启/关闭以下预览中的叠加层：

1. 在预览中检查相应元素。
2. 在 DOM 树中，点击相应元素旁边的 scroll-snap 标记。
3. 尝试向右滚动元素，观察叠加层。

叠加层会显示元素位置和贴靠点。

容器

如果 HTML 元素具有 container-type CSS 属性，则该元素就是容器。此类元素旁边有 container 标志，用于切换相应的叠加层。

开启/关闭以下预览中的叠加层：

1. 在预览中检查相应元素。
2. 在 DOM 树中，点击相应元素旁边的 container 标记。
3. 尝试通过拖动元素的右下角来调整元素大小，并观察布局变化和叠加情况。

叠加层会显示子元素的位置。

如需了解如何调试容器查询，请参阅检查和调试 CSS 容器查询。

槽位

<slot> HTML 元素是一个占位符，您可以用自己的内容填充。与 <template> 元素搭配使用时，您可利用 <slot> 创建单独的 DOM 树并将它们一起呈现。槽位内容元素旁边有 slot 标志，用作指向相应槽位的链接。

不妨浏览下方的预览页面，探索“slot”徽章：

1. 在预览中检查相应元素。
2. 在 DOM 树中，点击相应元素旁边的 slot 标记，找到对应的槽位。
3. 点击 reveal 标志可返回广告位的内容。

顶层

此徽章有助于您了解顶层的概念并直观地呈现。顶层会将内容渲染在所有其他图层之上，而不考虑 z-index。当您使用 .showModal() 方法打开 <dialog> 元素时，浏览器会将其置于顶层。

为了帮助您直观呈现顶层元素，Elements 面板会在 DOM 树中的结束 </html> 标记后面添加一个 #top-layer 容器。

顶层元素旁边有 top-layer (N) 标志，其中 N 是元素的索引编号。标记是指向 #top-layer 容器中相应元素的链接。

不妨浏览下方的预览页面，探索“top-layer (N)”徽章：

1. 在预览中，点击打开对话框。
2. 检查对话框。
3. 在 DOM 树中，点击 <dialog> 元素旁边的 top-layer (1) 标记。元素面板会将您转到 #top-layer 容器中 </html> 结束标记后面的相应元素。
4. 点击该元素旁边的reveal标志<dialog>可返回该元素::backdrop。

媒体

media 标记默认处于关闭状态。开启此设置后，它会显示在 <audio> 和 <video> 元素旁边。点击此标志可打开 Media 面板并调试您的媒体。

如需了解详情，请参阅使用“媒体”面板调试媒体播放器。