在 Chrome DevTools 的元素面板中，DOM 相关的徽章参考是一个容易被忽视却十分有用的部分。徽章为 DOM 元素提供了额外的标识与信息。通过它，开发者能快速获取 DOM 元素在性能、状态等方面的提示，辅助判断元素是否存在潜在问题，比如可能影响性能的特定属性或状态标记。这有助于更高效地调试网页，深入理解 DOM 元素在整个网页架构中的作用，提升前端开发与优化工作的效率。
显示或隐藏徽章 🌈
-
右键点击 DOM 树中的某个元素，然后选择 Badge settings...
-
勾选徽章旁边的复选框会让相应的在 DOM 树中的标记展示，清除复选框则会消失
网格（grid） 🌈
-
如果 HTML 元素的
displayCSS 属性设置为grid或inline-grid，则该 HTML 元素是网格容器。此类元素的旁边会显示用于切换相应叠加层的grid标记可以点击相应的 DOM 节点旁的徽章让相应的叠加层展示或消失，叠加层会显示列、行、行数和间隙
子网格（subgrid） 🌈
-
subgrid 是一种嵌套网格，其使用与其父级网格相同的轨迹。如果元素的
grid-template-columns和或grid-template-rows属性设置为subgrid，则元素属于 subgrid 容器。此类元素的旁边会显示用于切换相应叠加层的subgrid标记 -
在 DOM 树中，点击元素旁边的
subgrid标记并观察叠加层
Flex 🌈
-
如果 HTML 元素的
displayCSS 属性设置为flex或inline-flex，则该 HTML 元素是弹性容器。此类元素的旁边会显示用于切换相应叠加层的flex标记 -
在 DOM 树中，点击元素旁边的
flex标记并观察叠加层
广告（ad） 🌈
-
开发者工具可以检测一些广告帧并对其进行标记。此类画面旁边会显示
ad标志
滚动并捕捉（scroll-snap） 🌈
-
如果 HTML 元素的
overflowCSS 属性设置为scroll，则该 HTML 元素是滚动容器；如果有足够的内容导致溢出，则该元素为auto。滚动容器可以具有用于配置贴靠点的 CSS 属性。此类元素的旁边会显示用于切换相应叠加层的scroll-snap标记
容器（container） 🌈
-
如果 HTML 元素具有
container-typeCSS 属性，那么它就是容器。此类元素的旁边会显示用于切换相应叠加层的container标记 -
- 在预览中检查元素。
- 在 DOM 树中，点击相应元素旁边的
container标记。 - 尝试通过拖动元素的右下角来调整其大小，并观察布局更改和叠加。
槽位（slot） 🌈
<slot>HTML 元素是一个占位符，您可以使用自己的内容进行填充。借助<slot>和<template>元素，您可以创建单独的 DOM 树并将它们一起呈现。槽内容元素旁边有slot个标记，用作指向相应广告位的链接- 在预览中检查元素。
- 在 DOM 树中，点击元素旁边的
slot标记找到相应的槽位。
slot标记配有配对的reveal标记，可让您回到原来的位置。
顶层（top-layer） 🌈
-
此徽章有助于您了解顶层的概念并直观呈现出来。无论
z-index如何，顶层都会在所有其他层之上渲染内容。当您使用.showModal()方法打开<dialog>元素时，浏览器会将其置于顶层 -
为了帮助您直观了解顶层元素，Elements 面板会在 DOM 树的
</html>结束标记后面添加一个#top-layer容器 -
顶层元素旁边有
top-layer (N)个标记，其中N是元素的索引编号。标记是指向#top-layer容器中相应元素的链接 -
点击 Open dialog
-
会弹出一个对话框。在 DOM 树中，点击
<dialog>元素旁边的top-layer (1)标记。元素面板会将您转到#top-layer容器中</html>结束标记后面的相应元素。
媒体（reveal） 🌈
media标记默认处于停用状态。开启后，它会显示在<audio>和<video>元素旁边。点击此标志可打开媒体面板并调试媒体。
