在 Chrome 130 版本中，DevTools的 Elements 面板新增了一個scroll標記，專門用于標記頁面上的可滾動元素。這一改進使得定位和解決頁面中意外出現的滾動條變得更加直觀和便捷。

Chrome 團隊還在研發一項新功能——全新的“溢出”標記，該標記旨在明確指示出頁面上存在元素內容溢出的情況，從而助力開發者迅速診斷布局問題。

除了新增的scroll標記，其實 Chrome Devtools 的 Elements 面板中還有很多實用的標記，在元素中點擊右鍵并選擇 Badge setting... 即可查看和設置是否顯示標記。

下面就來分別看看這些標記的作用。

grid：網格布局

如果元素的 display 屬性設置為了 grid 或 inline-grid，該元素就是網格布局中的容器。這個元素的旁邊就會顯示 grid 標記，點擊標記可查看布局詳細信息。

flex：Flex 布局

如果元素的 display 屬性設置為了 flex 或 inline-flex，該元素就是 flex 布局中的容器。這個元素的旁邊就會顯示 flex 標記，點擊標記可查看布局詳細信息。

ad：廣告框架

用于標記出網頁中使用的某些廣告框架，以明確表示這些部分是用于展示廣告的。

scroll-snap：滾動捕捉

當元素的overflow 屬性設置為scroll或內容溢出時設置為auto，這個元素就成為了滾動容器，旁邊會顯示scroll-snap標記以查看滾動內容。

container：容器查詢

在CSS 容器查詢中，如果元素設置了 container-type 屬性，那么它就是容器，該元素旁邊就會顯示 container 標記。

slot：插槽

HTML 中的 <slot> 元素是一個占位符，可以自定義內容進行填充。

• 填充內容旁邊會顯示 slot 標記，點擊它可以查看對應的插槽。
• 在插槽旁邊會顯示 reveal 標記，點擊它可以返回上一步，以查看插槽的內容。

top-layer：頂層元素

top-layer 標記是為了直觀呈現頂層元素而添加的，位于 DOM 樹底部，以鏈接形式指向#top-layer容器中相應頂層元素的索引編號。點擊這個標記，就會跳轉到 </html> 標記后的 #top-layer 容器中的相應元素。

media：媒體

media 標記默認是關閉的，開啟之后，在<audio> 和 <video> 元素旁邊會顯示該標記。

點擊這個標記就會打開 Media 面板以調試媒體內容：

subgrid：嵌套網格布局

subgrid 是一種嵌套網格布局，如果元素的 grid-template-columns 或 grid-template-rows 屬性設置為 subgrid，則元素就是 subgrid 容器。它的旁邊就會顯示 subgrid  標記。