在「元素」面板中提供這個詳盡的徽章參考資料,藉此切換各種疊加層並加快 DOM 樹狀結構導覽速度。
顯示或隱藏徽章
如何顯示或隱藏徽章:
- 開啟開發人員工具。
- 在 DOM 樹狀結構中的元素上按一下滑鼠右鍵,然後選取「Badge settings...」。
- 勾選或取消選取已選徽章旁邊的核取方塊。
在「Elements」面板中,所選徽章會顯示在 DOM 樹狀結構中對應的元素旁。以下各節說明每個徽章。
格線
如果 HTML 元素的 display
CSS 屬性設為 grid
或 inline-grid
,就是一種格狀容器。這類元素旁邊會顯示 grid
標記,可用於切換對應的疊加層。
切換以下預覽畫面中的疊加層:
- 在預覽畫面中檢查元素。
- 在 DOM 樹狀結構中,按一下元素旁邊的
grid
標記,然後觀察疊加層。
疊加畫面會顯示欄、列、數字和間隔。
想瞭解如何對格狀版面配置進行偵錯,請參閱「檢查 CSS 格線」。
子網格
子格是巢狀格狀格線,使用與父項格線相同的軌道。如果元素之一或兩者的grid-template-columns
,grid-template-rows
屬性都設為 subgrid
,就就是子格狀容器。這類元素旁邊會顯示 subgrid
標記,可用於切換對應的疊加層。
切換以下預覽畫面中的疊加層:
- 在預覽畫面中檢查元素。
- 在 DOM 樹狀結構中,按一下元素旁邊的
subgrid
標記,然後觀察疊加層。
疊加畫面會顯示子網格的欄、列、數字和間隔。
Flex
如果 HTML 元素的 display
CSS 屬性設為 flex
或 inline-flex
,就是一種彈性容器。這類元素旁邊會顯示 flex
標記,可用於切換對應的疊加層。
切換以下預覽畫面中的疊加層:
- 在預覽畫面中檢查元素。
- 在 DOM 樹狀結構中,按一下元素旁邊的
flex
標記,然後觀察疊加層。
重疊會顯示子元素位置。
想瞭解如何對 Flex 版面配置進行偵錯,請參閱「檢查及偵錯 CSS Flexbox」。
廣告
開發人員工具可以偵測並標記廣告頁框。這類畫面旁有 ad
個徽章。
在以下預覽畫面中探索廣告:
- 在預覽畫面中檢查元素。
- 在 DOM 樹狀結構中,找到旁邊有
ad
標記的元素。
ad
徽章無法點擊,但您可以使用「轉譯」分頁,以紅色醒目顯示廣告頁框。
捲動貼齊
如果 HTML 元素的 overflow
CSS 屬性設為 scroll
,HTML 元素就會是捲動容器;如果有足夠內容導致溢位,則為 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)
徽章。「Elements」面板會將您帶往#top-layer
容器中的對應元素,位置在</html>
結尾標記後方。 - 按一下元素或其旁的
reveal
徽章,返回<dialog>
元素。::backdrop
媒體
「media
」徽章預設為停用。開啟後,就會顯示在 <audio>
和 <video>
元素旁邊。按一下這個徽章即可開啟「媒體」面板,並對媒體進行偵錯。
詳情請參閱「使用媒體面板對媒體播放器進行偵錯」。