徽章參考資料

索菲亞艾梅利安諾瓦
Sofia Emelianova
GitHub

在「元素」面板中提供這個詳盡的徽章參考資料，藉此切換各種疊加層並加快 DOM 樹狀結構導覽速度。

顯示或隱藏徽章

如何顯示或隱藏徽章：

  1. 開啟開發人員工具。
  2. 在 DOM 樹狀結構中的元素上按一下滑鼠右鍵，然後選取「Badge settings...」。徽章設定。
  3. 勾選或取消選取已選徽章旁邊的核取方塊。

在「Elements」面板中，所選徽章會顯示在 DOM 樹狀結構中對應的元素旁。以下各節說明每個徽章。

格線

如果 HTML 元素的 display CSS 屬性設為 grid 或 inline-grid，就是一種格狀容器。這類元素旁邊會顯示 grid 標記，可用於切換對應的疊加層。

切換以下預覽畫面中的疊加層：

  1. 在預覽畫面中檢查元素。
  2. 在 DOM 樹狀結構中，按一下元素旁邊的 grid 標記，然後觀察疊加層。

格線疊加層。

疊加畫面會顯示欄、列、數字和間隔。

想瞭解如何對格狀版面配置進行偵錯，請參閱「檢查 CSS 格線」。

子網格

子格是巢狀格狀格線，使用與父項格線相同的軌道。如果元素之一或兩者的grid-template-columns，grid-template-rows 屬性都設為 subgrid，就就是子格狀容器。這類元素旁邊會顯示 subgrid 標記，可用於切換對應的疊加層。

切換以下預覽畫面中的疊加層：

  1. 在預覽畫面中檢查元素。
  2. 在 DOM 樹狀結構中，按一下元素旁邊的 subgrid 標記，然後觀察疊加層。

子網格疊加層。

疊加畫面會顯示子網格的欄、列、數字和間隔。

Flex

如果 HTML 元素的 display CSS 屬性設為 flex 或 inline-flex，就是一種彈性容器。這類元素旁邊會顯示 flex 標記，可用於切換對應的疊加層。

切換以下預覽畫面中的疊加層：

  1. 在預覽畫面中檢查元素。
  2. 在 DOM 樹狀結構中，按一下元素旁邊的 flex 標記，然後觀察疊加層。

Flex 疊加層。

重疊會顯示子元素位置。

想瞭解如何對 Flex 版面配置進行偵錯，請參閱「檢查及偵錯 CSS Flexbox」。

開發人員工具可以偵測並標記廣告頁框。這類畫面旁有 ad 個徽章。

在以下預覽畫面中探索廣告：

  1. 在預覽畫面中檢查元素。
  2. 在 DOM 樹狀結構中，找到旁邊有 ad 標記的元素。

廣告徽章。

ad 徽章無法點擊，但您可以使用「轉譯」分頁，以紅色醒目顯示廣告頁框。

捲動貼齊

如果 HTML 元素的 overflow CSS 屬性設為 scroll，HTML 元素就會是捲動容器；如果有足夠內容導致溢位，則為 auto。捲動容器可以設定貼齊點的 CSS 屬性。這類元素旁邊會顯示 scroll-snap 標記，可用於切換對應的疊加層。

切換以下預覽畫面中的疊加層：

  1. 在預覽畫面中檢查元素。
  2. 在 DOM 樹狀結構中，按一下元素旁邊的 scroll-snap 徽章。
  3. 請嘗試向右捲動元素，並觀察重疊元素。

捲動貼齊重疊元素。

重疊會顯示元素位置和貼齊點。

容器

HTML 元素如果具有 container-type CSS 屬性，則是一種容器。這類元素旁邊會顯示 container 標記，可用於切換對應的疊加層。

切換以下預覽畫面中的疊加層：

  1. 在預覽畫面中檢查元素。
  2. 在 DOM 樹狀結構中，按一下元素旁邊的 container 徽章。
  3. 嘗試拖曳元素右下角以調整元素大小，觀察版面配置變更和重疊情形。

容器重疊。

重疊會顯示子元素位置。

如要瞭解如何對容器查詢進行偵錯，請參閱「檢查及偵錯 CSS 容器查詢」。

運算單元

<slot> HTML 元素是一個預留位置，您可以填入自己的內容。與 <template> 元素搭配使用，<slot> 可讓您建立獨立的 DOM 樹狀結構，並一併呈現這些樹狀結構。版位內容元素旁邊會顯示 版位。slot 徽章，做為對應版位的連結。

探索下列預先發布版中的 版位。slot 徽章：

  1. 在預覽畫面中檢查元素。
  2. 在 DOM 樹狀結構中，按一下元素旁邊的 版位。slot 徽章，找出對應的版位。 運算單元並揭穿徽章。
  3. 按一下 顯示。reveal 徽章即可返回運算單元內容。

頂層

這個徽章可協助您瞭解頂層的概念，並以視覺化方式呈現。無論 z-index 為何，頂層圖層都會在所有其他圖層上方算繪內容。使用 .showModal() 方法開啟 <dialog> 元素時，瀏覽器會將該元素置於頂層。

為協助您透過視覺化方式呈現頂層元素，「Elements」面板會在 DOM 樹狀結構的 </html> 結尾標記後方新增 #top-layer 容器。

頂層元素旁邊有 。top-layer (N) 標記，其中 N 是元素的索引號碼。徽章是 #top-layer 容器中對應元素的連結。

探索下列預先發布版中的 。top-layer (N) 徽章：

  1. 在預覽畫面中，按一下「開啟對話方塊」。
  2. 檢查對話方塊。
  3. 在 DOM 樹狀結構中，按一下 <dialog> 元素旁邊的 。top-layer (1) 徽章。「Elements」面板會將您帶往 #top-layer 容器中的對應元素，位置在 </html> 結尾標記後方。頂層容器和標記。
  4. 按一下元素或其旁的顯示。reveal徽章，返回<dialog>元素。::backdrop

媒體

「media」徽章預設為停用。開啟後，就會顯示在 <audio> 和 <video> 元素旁邊。按一下這個徽章即可開啟「媒體」面板，並對媒體進行偵錯。

媒體標記會在標記設定中開啟，並顯示在影片元素旁邊。

詳情請參閱「使用媒體面板對媒體播放器進行偵錯」。