借助元素面板中的这一综合性标记,您可以切换各种叠加层并加快 DOM 树导航的速度。
显示或隐藏徽章
如需显示或隐藏徽章,请按以下步骤操作:
- 打开开发者工具。
- 右键点击 DOM 树中的某个元素,然后选择 Badge settings...。
- 选中或清除所选徽章旁边的复选框。
元素面板会在 DOM 树中的相应元素旁边显示选中的标记。后续部分将介绍每种徽章。
网格
如果 HTML 元素的 display
CSS 属性设置为 grid
或 inline-grid
,则该元素就是网格容器。此类元素旁边有 grid
标志,用于切换相应的叠加层。
开启/关闭以下预览中的叠加层:
- 在预览中检查相应元素。
- 在 DOM 树中,点击元素旁边的
grid
标记并观察叠加层。
叠加层会显示列、行、编号和间隔。
如需了解如何调试网格布局,请参阅检查 CSS 网格。
子网格
子网格是使用与其父网格相同的轨道的嵌套网格。如果某个元素的 grid-template-columns
和 grid-template-rows
属性设置为 subgrid
,则该元素就是一个 subgrid 容器。此类元素旁边有 subgrid
标志,用于切换相应的叠加层。
开启/关闭以下预览中的叠加层:
- 在预览中检查相应元素。
- 在 DOM 树中,点击元素旁边的
subgrid
标记并观察叠加层。
叠加层会显示子网格的列、行、编号和间隔。
Flex
如果 HTML 元素的 display
CSS 属性设置为 flex
或 inline-flex
,则该 HTML 元素属于灵活容器。此类元素旁边有 flex
标志,用于切换相应的叠加层。
开启/关闭以下预览中的叠加层:
- 在预览中检查相应元素。
- 在 DOM 树中,点击元素旁边的
flex
标记并观察叠加层。
叠加层会显示子元素的位置。
如需了解如何调试 Flex 布局,请参阅检查和调试 CSS Flexbox。
Ad
开发者工具可以检测一些广告框架并对其进行标记。此类画面旁边会显示 ad
标志。
在以下预览中发现广告:
- 在预览中检查相应元素。
- 在 DOM 树中,找到一个旁边带有
ad
标志的元素。
ad
标记不可点击,但您可以使用呈现标签页以红色突出显示广告框架。
滚动贴靠
如果 HTML 元素的 overflow
CSS 属性设置为 scroll
,则该元素就是滚动容器;如果有足够的内容导致溢出,则该元素就是 auto
。滚动容器可以具有用于配置贴靠点的 CSS 属性。此类元素旁边有 scroll-snap
标志,用于切换相应的叠加层。
开启/关闭以下预览中的叠加层:
- 在预览中检查相应元素。
- 在 DOM 树中,点击相应元素旁边的
scroll-snap
标记。 - 尝试向右滚动元素,观察叠加层。
叠加层会显示元素位置和贴靠点。
容器
如果 HTML 元素具有 container-type
CSS 属性,则该元素就是容器。此类元素旁边有 container
标志,用于切换相应的叠加层。
开启/关闭以下预览中的叠加层:
- 在预览中检查相应元素。
- 在 DOM 树中,点击相应元素旁边的
container
标记。 - 尝试通过拖动元素的右下角来调整元素大小,并观察布局变化和叠加情况。
叠加层会显示子元素的位置。
如需了解如何调试容器查询,请参阅检查和调试 CSS 容器查询。
槽位
<slot>
HTML 元素是一个占位符,您可以用自己的内容填充。与 <template>
元素搭配使用时,您可利用 <slot>
创建单独的 DOM 树并将它们一起呈现。槽位内容元素旁边有 slot
标志,用作指向相应槽位的链接。
不妨浏览下方的预览页面,探索“slot
”徽章:
- 在预览中检查相应元素。
- 在 DOM 树中,点击相应元素旁边的
slot
标记,找到对应的槽位。 - 点击
reveal
标志可返回广告位的内容。
顶层
此徽章有助于您了解顶层的概念并直观地呈现。顶层会将内容渲染在所有其他图层之上,而不考虑 z-index
。当您使用 .showModal()
方法打开 <dialog>
元素时,浏览器会将其置于顶层。
为了帮助您直观呈现顶层元素,Elements 面板会在 DOM 树中的结束 </html>
标记后面添加一个 #top-layer
容器。
顶层元素旁边有 top-layer (N)
标志,其中 N
是元素的索引编号。标记是指向 #top-layer
容器中相应元素的链接。
不妨浏览下方的预览页面,探索“top-layer (N)
”徽章:
- 在预览中,点击打开对话框。
- 检查对话框。
- 在 DOM 树中,点击
<dialog>
元素旁边的top-layer (1)
标记。元素面板会将您转到#top-layer
容器中</html>
结束标记后面的相应元素。 - 点击该元素旁边的
reveal
标志<dialog>
可返回该元素::backdrop
。
媒体
media
标记默认处于关闭状态。开启此设置后,它会显示在 <audio>
和 <video>
元素旁边。点击此标志可打开 Media 面板并调试您的媒体。
如需了解详情,请参阅使用“媒体”面板调试媒体播放器。