借助元素面板中徽章的这份全面参考指南，您可以切换各种叠加层并加快 DOM 树导航速度。
显示或隐藏徽章
如需显示或隐藏特定徽章，请执行以下操作：
- 打开开发者工具。
- 右键点击 DOM 树中的某个元素，然后在徽章设置子菜单中选中一个或多个徽章。
元素面板会在 DOM 树中相应元素旁边显示所选徽章。以下部分将介绍每种徽章。
查看来源
view-source 徽章位于 HTML 网页根目录中的 <html> 标记旁边。点击该按钮可在来源面板中查看网页的源代码。
此徽章提供了一种替代工作流程，可替代 Chrome 网页上下文（右键点击）菜单中的查看网页源代码选项：
- 在 Chrome 中，右键点击某个网页，然后选择检查。
- 在元素面板中，点击
<html>标记旁边的view-source标记。 - 在来源面板中检查网页源代码。
网格
如果 HTML 元素的 display CSS 属性设置为 grid 或 inline-grid，则该元素为网格容器。此类元素旁边会显示 grid 标记，用于切换相应的叠加层。
在以下预览中切换叠加层：
- 检查预览中的元素。
- 在 DOM 树中，点击元素旁边的
grid标记，然后观察叠加层。
叠加层会显示列、行、它们的编号以及间距。
如需了解如何调试网格布局，请参阅检查 CSS 网格。
子网格
子网格是使用与其父网格相同的轨道的一个嵌套网格。如果元素的 grid-template-columns 和 grid-template-rows 属性中有一个或两个设置为 subgrid，则该元素为子网格容器。此类元素旁边会显示 subgrid 标记，用于切换相应的叠加层。
在以下预览中切换叠加层：
- 检查预览中的元素。
- 在 DOM 树中，点击元素旁边的
subgrid标记，然后观察叠加层。
叠加层会显示子网格的列、行、编号和间距。
Flex
如果 HTML 元素的 display CSS 属性设置为 flex 或 inline-flex，则该元素为 Flex 容器。此类元素旁边会显示 flex 标记，用于切换相应的叠加层。
在以下预览中切换叠加层：
- 检查预览中的元素。
- 在 DOM 树中，点击元素旁边的
flex标记，然后观察叠加层。
叠加层显示子元素位置。
如需了解如何调试 Flex 布局，请参阅检查和调试 CSS Flexbox。
广告
开发者工具可以检测到一些广告框架并对其进行标记。此类框架旁边会显示 ad 徽章。
在以下预览中发现广告：
- 检查预览中的元素。
- 在 DOM 树中，找到旁边带有
ad标记的元素。
ad 徽章不可点击，但您可以使用渲染标签页以红色突出显示广告框架。
滚动
如果 HTML 元素的 overflow CSS 属性设置为 scroll，或者在有足够的内容导致溢出时设置为 auto，则该元素为滚动容器。此类元素旁边会显示 scroll 徽章。
滚动贴靠
滚动容器可以具有用于配置贴靠点的 CSS 属性。此类元素旁边会显示 scroll-snap 标记，用于切换相应的叠加层。
在以下预览中切换叠加层：
- 检查预览中的元素。
- 在 DOM 树中，点击元素旁边的
scroll-snap徽章。 - 尝试向右滚动元素，并观察叠加层。
叠加层会显示元素位置和贴靠点。
Container
如果 HTML 元素具有 container-type CSS 属性，则该元素为容器。此类元素旁边会显示 container 标记，用于切换相应的叠加层。
在以下预览中切换叠加层：
- 检查预览中的元素。
- 在 DOM 树中，点击元素旁边的
container徽章。 - 尝试拖动元素的右下角来调整其大小，并观察布局变化和叠加效果。
叠加层显示子元素位置。
如需了解如何调试容器查询，请参阅检查和调试 CSS 容器查询。
广告位
<slot> HTML 元素是一个占位符，您可以使用自己的内容填充该元素。借助 <slot> 元素，您可以创建单独的 DOM 树并将其一起呈现。<template>内容元素旁边带有 slot 徽章，可作为指向相应 slot 的链接。
在以下预览中，了解 slot 徽章：
- 检查预览中的元素。
- 在 DOM 树中，点击元素旁边的
slot徽章，找到对应的 slot。
- 点击
reveal徽章，返回到相应广告资源的内容。
顶层
此徽章可帮助您了解顶层的概念并直观呈现。顶层会在所有其他层之上呈现内容，无论 z-index 如何。当您使用 .showModal() 方法打开 <dialog> 元素时，浏览器会将其放置在顶层。
为了帮助您直观呈现顶层元素，元素面板会在结束 </html> 标记后向 DOM 树添加 #top-layer 容器。
顶层元素旁边会显示 top-layer (N) 徽章，其中 N 是元素的索引号。徽章是指向 #top-layer 容器中相应元素的链接。
在以下预览中，了解 top-layer (N) 徽章：
- 在预览中，点击打开对话框。
- 检查对话框。
- 在 DOM 树中，点击
<dialog>元素旁边的top-layer (1)徽章。元素面板会将您带到#top-layer容器中紧跟在结束</html>标记后面的相应元素。
- 点击元素或其
::backdrop旁边的reveal徽章，返回到<dialog>元素。
媒体
media 徽章默认处于关闭状态。开启后，它会显示在 <audio> 和 <video> 元素旁边。点击此徽章可打开媒体面板并调试媒体。
如需了解详情，请参阅使用“媒体”面板调试媒体播放器。
弹出式窗口
弹出框是指具有 popover 属性的任何元素，可用于各种互动模式，包括提示、提醒、Toast 等。此类元素旁边会显示 popover 徽章。
此标记会切换旁边的 top-layer 标记，该标记会链接到 #top-layer 容器中的相应元素。
在以下预览中了解 popover 徽章：
- 在预览中，点击 TOGGLE POPOVER。
- 检查随即显示的弹出式窗口。
在 DOM 树中，点击
<div popover>元素旁边的popover徽章。元素面板会显示top-layer徽章。
按照顶层部分中的步骤操作。
如需了解详情，另请参阅 https://web.dev/learn/css/popover-and-dialog。
起始样式
@starting-style 规则用于定义元素在网页上呈现之前的初始样式。对于从 display: none 动画进入的元素，这是必需的，因为它们需要一个状态才能动画进入。此类元素旁边会显示 starting-style 徽章。
此徽章会切换 @starting-style 规则中的样式，以便您查看动画的实际效果。
在以下预览中了解 starting-style 徽章：
- 在预览中，点击 OPEN POPOVER。
- 检查随即显示的弹出式窗口。
在 DOM 树中，切换
<div popover>元素旁边的starting-style标记。
在元素 > 样式标签页中，观察动画的实际效果以及正在应用的样式。
如需了解详情，另请参阅为弹出式信息框添加动画效果。