在 Chrome 130 版本中，DevTools的 Elements 面板新增了一個(gè)scroll標(biāo)記，專門用于標(biāo)記頁面上的可滾動(dòng)元素。這一改進(jìn)使得定位和解決頁面中意外出現(xiàn)的滾動(dòng)條變得更加直觀和便捷。

Chrome 團(tuán)隊(duì)還在研發(fā)一項(xiàng)新功能——全新的“溢出”標(biāo)記，該標(biāo)記旨在明確指示出頁面上存在元素內(nèi)容溢出的情況，從而助力開發(fā)者迅速診斷布局問題。

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

下面就來分別看看這些標(biāo)記的作用。

grid：網(wǎng)格布局

如果元素的 display 屬性設(shè)置為了 grid 或 inline-grid，該元素就是網(wǎng)格布局中的容器。這個(gè)元素的旁邊就會(huì)顯示 grid 標(biāo)記，點(diǎn)擊標(biāo)記可查看布局詳細(xì)信息。

flex：Flex 布局

如果元素的 display 屬性設(shè)置為了 flex 或 inline-flex，該元素就是 flex 布局中的容器。這個(gè)元素的旁邊就會(huì)顯示 flex 標(biāo)記，點(diǎn)擊標(biāo)記可查看布局詳細(xì)信息。

ad：廣告框架

用于標(biāo)記出網(wǎng)頁中使用的某些廣告框架，以明確表示這些部分是用于展示廣告的。

scroll-snap：滾動(dòng)捕捉

當(dāng)元素的overflow 屬性設(shè)置為scroll或內(nèi)容溢出時(shí)設(shè)置為auto，這個(gè)元素就成為了滾動(dòng)容器，旁邊會(huì)顯示scroll-snap標(biāo)記以查看滾動(dòng)內(nèi)容。

container：容器查詢

在CSS 容器查詢中，如果元素設(shè)置了 container-type 屬性，那么它就是容器，該元素旁邊就會(huì)顯示 container 標(biāo)記。

slot：插槽

HTML 中的 <slot> 元素是一個(gè)占位符，可以自定義內(nèi)容進(jìn)行填充。

• 填充內(nèi)容旁邊會(huì)顯示 slot 標(biāo)記，點(diǎn)擊它可以查看對(duì)應(yīng)的插槽。
• 在插槽旁邊會(huì)顯示 reveal 標(biāo)記，點(diǎn)擊它可以返回上一步，以查看插槽的內(nèi)容。

top-layer：頂層元素

top-layer 標(biāo)記是為了直觀呈現(xiàn)頂層元素而添加的，位于 DOM 樹底部，以鏈接形式指向#top-layer容器中相應(yīng)頂層元素的索引編號(hào)。點(diǎn)擊這個(gè)標(biāo)記，就會(huì)跳轉(zhuǎn)到 </html> 標(biāo)記后的 #top-layer 容器中的相應(yīng)元素。

media：媒體

media 標(biāo)記默認(rèn)是關(guān)閉的，開啟之后，在<audio> 和 <video> 元素旁邊會(huì)顯示該標(biāo)記。

點(diǎn)擊這個(gè)標(biāo)記就會(huì)打開 Media 面板以調(diào)試媒體內(nèi)容：

subgrid：嵌套網(wǎng)格布局

subgrid 是一種嵌套網(wǎng)格布局，如果元素的 grid-template-columns 或 grid-template-rows 屬性設(shè)置為 subgrid，則元素就是 subgrid 容器。它的旁邊就會(huì)顯示 subgrid  標(biāo)記。