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