徽章參考資料

Sofia Emelianova
Sofia Emelianova
GitHub

透過「元素」面板中的徽章完整參考資料，切換各種疊加層並加快 DOM 樹狀結構導覽功能。

顯示或隱藏徽章

如要顯示或隱藏徽章，請按照下列步驟操作：

  1. 開啟開發人員工具。
  2. 在 DOM 樹狀結構中找出要設定的元素，然後按一下滑鼠右鍵，並選取「徽章設定...」。 徽章設定。
  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 徽章，並觀察重疊層。

子格線重疊。

疊加層會顯示子網格的欄、列、數量和間距。

彈性

如果 HTML 元素的 display CSS 屬性設為 flex 或 inline-flex，則該元素為 Flex 容器。此類元素旁邊會顯示 flex 徽章，可切換相應的疊加層。

在下列預覽畫面中切換重疊顯示：

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

Flex 重疊層。

重疊圖會顯示子元素的位置。

如要瞭解如何為 Flexbox 版面配置偵錯，請參閱「檢查及偵錯 CSS Flexbox」。

開發人員工具可以偵測部分廣告框架並標記。這類相框旁邊會顯示 ad 徽章。

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

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

廣告徽章。

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

捲動

如果 HTML 元素的 overflow CSS 屬性設為 scroll，或是內容足以造成溢流時設為 auto，則該元素即為捲動容器。這類元素旁邊會顯示 scroll 徽章。

DOM 樹狀結構節點上的捲動徽章。

捲動貼齊

捲動容器可以包含用於設定對齊點的 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> 元素時，瀏覽器會將該元素置於頂層。

為協助您以視覺化方式呈現頂層元素，元素面板會在結束 </html> 標記後，將 #top-layer 容器新增至 DOM 樹狀結構。

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

在以下預覽畫面中，請找出 top-layer (N) 徽章：

  1. 在預覽畫面中，按一下「開啟對話方塊」。
  2. 檢查對話方塊。
  3. 在 DOM 樹狀結構中，按一下 <dialog> 元素旁的 top-layer (1) 徽章。在結束 </html> 標記後，您可以透過「Elements」面板前往 #top-layer 容器中的對應元素。頂層容器和徽章。
  4. 如要返回 <dialog> 元素，請按一下元素或其 ::backdrop 旁的 reveal 徽章。

媒體

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

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

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