徽章参考

Sofia Emelianova

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

显示或隐藏徽章

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

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

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

网格

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

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

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

叠加层会显示列、行、行数和间隙。

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

子网格

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

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

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，则该元素就是滚动容器。滚动容器可以具有用于配置贴靠点的 CSS 属性。此类元素的旁边会显示用于切换相应叠加层的 scroll-snap 标记。

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

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

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

Container

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

注意：CSS 容器查询是一项实验性功能。如需在开发者工具中启用其支持，请在 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. 在预览中，点击 Open dialog。
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> 元素旁边。点击此标记可打开媒体面板并调试媒体。

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