徽章參考資料

Sofia Emelianova
Sofia Emelianova
GitHub

在「元素」面板中提供詳盡的徽章參考資料，即可切換不同的疊加層並加快 DOM 樹狀結構導覽功能。

顯示或隱藏徽章

如何顯示或隱藏徽章：

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

「元素」面板會在 DOM 樹狀結構中的適當元素旁顯示所選徽章。以下各節將說明所有徽章。

GRid

如果 HTML 元素的 display CSS 屬性設為 grid 或 inline-grid，則 HTML 元素即為格線容器。這類元素旁邊會顯示 grid 徽章，可切換對應的疊加層。

在以下預覽畫面中切換重疊元素：

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

格線疊加層。

疊加畫面顯示欄、列、編號和間隔。

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

子類別

「subgrid」是巢狀格線，與父格線使用相同的軌跡。如果元素是子格線容器，當其 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 元素是預留位置，您可以填入自己的內容。<slot> 與 <template> 元素搭配使用，可讓您建立獨立的 DOM 樹狀結構並向所有人展示。版位內容元素旁邊會顯示 版位。slot 徽章，用來連結至對應版位。

在以下預覽畫面中發現「版位。slot」徽章：

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

頂層

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

為協助您呈現頂層圖層元素，元素面板會在 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. 按一下元素或其 ::backdrop 旁邊的 顯示。reveal 徽章，即可返回 <dialog> 元素。

媒體

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

媒體徽章會顯示在徽章設定中，並顯示在影片元素旁邊。

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