徽章参考

Sofia Emelianova
Sofia Emelianova
GitHub

借助 Elements 面板中徽章的这份全面参考资料，您可以切换各种叠加层并加快 DOM 树导航速度。

显示或隐藏徽章

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

  1. 打开开发者工具。
  2. 右键点击 DOM 树中的某个元素，然后在 Badge settings （徽章设置）子菜单中选中一个或多个徽章。

“标记设置”菜单。

Elements 面板会在 DOM 树中相应元素旁边显示所选徽章。下一部分将介绍每个徽章。

View-source

view-source 徽章位于 HTML 网页根目录的 <html> 标记旁边。点击该徽章可在 Sources 面板中查看网页的源代码。

“查看来源”徽章。

此徽章提供了一种替代工作流，可替代 Chrome 网页上下文（右键点击）菜单中的 View Page Source （查看网页源代码）选项：

  1. 在 Chrome 中，右键点击网页，然后选择 Inspect （检查）。
  2. 在 Elements 面板中，点击 view-source 徽章旁边的 <html> 标记。
  3. 在 Sources 面板中检查网页源代码。

Grid

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

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

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

网格叠加层。

叠加层会显示列、行、列号和行号以及间距。

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

Subgrid

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

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

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

子网格叠加层。

叠加层会显示子网格的列、行、列号和行号以及间距。

Flex

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

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

  1. 在预览中检查该元素。
  2. 在 DOM 树中，点击该元素旁边的 flex 徽章，然后观察叠加层。

Flex 叠加层。

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

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

开发者工具可以检测某些 广告框架并为其添加标记。此类框架旁边会显示 ad 徽章。

在以下预览中发现广告：

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

广告标志。

ad 徽章不可点击，但如果您将鼠标悬停在该徽章上，系统会显示一个工具提示，其中提供了有关该元素为何被标识为广告的背景信息，例如：

广告标志的提示。

  • Script ancestry（脚本祖先）：创建该元素所涉及的脚本。
  • 过滤条件列表规则：过滤条件列表（例如 EasyList）中与该元素或其加载的资源匹配的具体规则。

您还可以使用 Rendering （渲染）标签页以红色 突出显示广告框架。

Scroll

如果 HTML 元素的 overflow CSS 属性设置为 scroll，或者在内容足够多以致溢出时设置为 auto，则该元素为 滚动容器。此类元素旁边会显示 scroll 徽章。

DOM 树节点上的滚动徽章。

Scroll-snap

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

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

  1. 在预览中检查该元素。
  2. 在 DOM 树中，点击该元素旁边的 scroll-snap 徽章。
  3. 尝试向右滚动该元素，然后观察叠加层。

滚动贴靠叠加层。

叠加层会显示元素的位置和吸附点。

Container

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

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

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

容器叠加层。

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

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

Slot

<slot> HTML 元素是一个占位符，您可以使用自己的内容填充该占位符。借助 <template> 元素，<slot> 可让您创建单独的 DOM 树并将其一起呈现。广告位内容元素旁边会显示 slot 徽章，这些徽章充当指向相应广告位的链接。

在以下预览中发现 slot 徽章：

  1. 在预览中检查该元素。
  2. 在 DOM 树中，点击该元素旁边的 slot 徽章，以找到相应的广告位。 转动轮盘并显示徽章。
  3. 点击 reveal 徽章，返回到广告位的内容。

Top-layer

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

为了帮助您将顶层元素可视化，Elements 面板会在 DOM 树中的结束 </html> 标记后添加 #top-layer 容器。

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

在以下预览中发现 top-layer (N) 徽章：

  1. 在预览中，点击 Open dialog （打开对话框）。
  2. 检查对话框。
  3. 在 DOM 树中，点击 top-layer (1) 徽章旁边的 <dialog> 元素。Elements 面板会将您带到 #top-layer 容器中结束 </html> 标记后的相应元素。 顶层容器和徽章。
  4. 点击元素或其 ::backdrop 旁边的 reveal 徽章，返回到 <dialog> 元素。

Media

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

在徽章设置中开启的媒体徽章，显示在视频元素旁边。

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

Popover

弹出式窗口是指具有 popover 属性的任何元素，适用于各种互动模式，包括工具提示、提醒、Toast 等。此类元素旁边会显示 popover 徽章。

此徽章会切换其旁边的 top-layer 徽章，该徽章会链接到 #top-layer 容器中的相应元素。

在以下预览中发现 popover 徽章：

  1. 在预览中，点击 TOGGLE POPOVER （切换弹出式窗口）。
  2. 检查显示的弹出式窗口。

  3. 在 DOM 树中，点击 popover 徽章旁边的 <div popover> 元素。Elements 面板会显示 top-layer 徽章。

    带有弹出式窗口属性的元素旁边的弹出式窗口标记。

  4. 按照顶层部分中的步骤操作。

如需了解详情，另请参阅 https://web.dev/learn/css/popover-and-dialog。

Starting-style

The@starting-style rule 定义元素在网页上呈现之前的初始样式。对于从 display: none 动画进入的元素，这是必需的，因为它们需要一个状态才能动画进入。此类元素旁边会显示 starting-style 徽章。

此徽章会切换 @starting-style 规则中的样式，以便您查看动画的实际效果。

在以下预览中发现 starting-style 徽章：

  1. 在预览中，点击 OPEN POPOVER （打开弹出式窗口）。
  2. 检查显示的弹出式窗口。

  3. 在 DOM 树中，切换 starting-style 徽章旁边的 <div popover> 元素。

    带有 @starting-style 规则的元素旁边的起始样式徽章。

  4. 在 Elements （元素）> Styles （样式）标签页中，观察动画的实际效果以及应用的样式。

如需了解详情，另请参阅为弹出式窗口添加动画效果。

Custom-element

自定义 HTML 元素（使用连字符标记名称或 is="..." 属性（用于自定义内置元素）标识）旁边会显示 custom-element 徽章。

点击该徽章可转到 Sources 面板中的相关代码。

DOM 树中自定义 HTML 元素旁边的自定义元素徽章。