徽章参考

Sofia Emelianova

如需切换各种叠加层并加快 DOM 树导航速度，请参阅 Elements 面板中关于标记的全面参考。

显示或隐藏徽章

如需显示或隐藏徽章，请执行以下操作：

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

Elements 面板会在 DOM 树中的相应元素旁边显示所选标记。以下部分介绍了每种徽章。

网格

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

在以下预览中切换叠加层：

这个 Pen

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

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

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

子网格

subgrid 是一种嵌套网格，其使用与其父级网格相同的轨迹。如果元素的 grid-template-columns、grid-template-rows 属性之一或全部设置为 subgrid，则该元素为子网格容器。此类元素旁边会显示 subgrid 标记，用于切换相应的叠加层。

在以下预览中切换叠加层：

这个 Pen

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

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

折叠

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

在以下预览中切换叠加层：

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

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

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

广告

开发者工具可以检测某些广告框架并为其添加代码。此类画面旁边会显示 ad 标志。

在以下预览中发现广告：

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

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

滚动

如果 HTML 元素的 overflow CSS 属性设置为 scroll，或者内容足以导致溢出时设置为 auto，则该元素就是滚动容器。此类元素的旁边会显示 scroll 标志。

滚动并捕捉

滚动容器可以具有用于配置吸附点的 CSS 属性。此类元素旁边会显示 scroll-snap 标记，用于切换相应的叠加层。

在以下预览中切换叠加层：

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

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

Container

如果 HTML 元素具有 container-type CSS 属性，则表示该元素是一个容器。此类元素旁边会显示 container 标记，用于切换相应的叠加层。

注意：CSS 容器查询是一项实验性功能。如需在 DevTools 中启用对其的支持，请在 chrome://flags 下将 Enable CSS Container Queries 实验设置为 Enabled。否则，下次预览将无法正常运行。

在以下预览中切换叠加层：

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

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

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

广告位

<slot> HTML 元素是一个占位符，您可以用自己的内容填充该占位符。借助 <slot> 和 <template> 元素，您可以创建单独的 DOM 树并将它们一起呈现。槽内容元素旁边会显示 ink_selectionslot 标记，该标记可用作指向相应槽的链接。

在以下预览中，探索 ink_selectionslot 标记：

1. 在预览中检查元素。
2. 在 DOM 树中，点击元素旁边的 ink_selectionslot 标记，找到相应的槽。
   要点：ink_selectionslot 标记有两个配对的 ink_selectionreveal 标记，可让您返回这项内容。
3. 点击 ink_selectionreveal 标记即可返回到槽的内容。

顶层

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

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

顶层元素旁边会显示 ink_selectiontop-layer (N) 标记，其中 N 是元素的编号。这些徽章是指向 #top-layer 容器中相应元素的链接。

在以下预览中，探索 ink_selectiontop-layer (N) 标记：

1. 在预览中，点击打开对话框。
2. 检查对话框。
3. 在 DOM 树中，点击 <dialog> 元素旁边的 ink_selectiontop-layer (1) 标记。元素面板会将您带到闭合 </html> 标记后的 #top-layer 容器中的相应元素。
   要点：ink_selectiontop-layer (N) 标记有两个配对的 ink_selectionreveal 标记，可让您返回这项内容。
4. 点击该元素或其 ::backdrop 旁边的 ink_selectionreveal 标记即可返回 <dialog> 元素。

媒体

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

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