徽章参考

Sofia Emelianova
Sofia Emelianova

借助 Elements 面板中的全面标记参考,切换各种叠加层并加快 DOM 树导航速度。

显示或隐藏徽章

要显示或隐藏徽章,请执行以下操作:

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

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

网格

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

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

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

网格叠加层。

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

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

子网格

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

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

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

子网格叠加层。

叠加层显示列、行、行数和子网格的间距。

Flex

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

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

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

Flex 叠加层。

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

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

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

在以下预览中发现广告:

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

广告标志。

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

滚动并捕捉

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

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

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

滚动贴靠叠加层。

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

容器

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

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

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

容器叠加层。

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

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

槽位

<slot> HTML 元素是一个占位符,您可以使用自己的内容进行填充。借助 <slot><template> 元素,您可以创建单独的 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. 在预览中,点击 Open dialog
  2. 检查对话框
  3. 在 DOM 树中,点击 <dialog> 元素旁边的 关联。top-layer (1) 标记。元素面板会将您转到 #top-layer 容器中 </html> 结束标记后面的相应元素。顶层容器和标志。
  4. 点击元素或其 ::backdrop 旁边的 显露。reveal 标记返回 <dialog> 元素。

媒体

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

媒体标志已在标志设置中开启,并显示在视频元素旁边。

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