徽章參考資料

Sofia Emelianova
Sofia Emelianova
GitHub

這份「元素」面板徽章完整參考資料，可協助您切換各種疊加層，並加快 DOM 樹狀結構導覽速度。

顯示或隱藏徽章

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

  1. 開啟開發人員工具。
  2. 在 DOM 樹狀結構中，以滑鼠右鍵按一下元素，然後在「徽章設定」子選單中勾選一或多個徽章。

「徽章設定」選單。

「元素」面板會在 DOM 樹狀結構中，顯示所選徽章和對應元素。下一節將說明每個徽章。

查看原始碼

view-source 徽章位於 HTML 網頁根層級的 <html> 標記旁。按一下即可在「來源」面板中查看網頁來源。

「查看來源」徽章。

這個徽章提供另一種工作流程，可替代 Chrome 網頁內容 (按一下滑鼠右鍵) 選單中的「檢視網頁原始碼」選項：

  1. 在 Chrome 中，依序按一下滑鼠右鍵 >「檢查」網頁。
  2. 在「Elements」面板中，按一下 <html> 標記旁的 view-source 徽章。
  3. 在「Sources」面板中檢查網頁原始碼。

格線

如果 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 重疊廣告。

疊加層會顯示子元素位置。

如要瞭解如何對彈性版面配置進行偵錯，請參閱「檢查 CSS Flexbox 並進行偵錯」。

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

在下列預覽畫面中找出廣告：

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

廣告徽章。

ad 徽章無法點選，但將游標懸停在徽章上時，會顯示工具提示，說明元素遭判定為廣告的原因，例如：

廣告徽章的工具提示。

  • 指令碼祖系：建立元素時涉及的指令碼。
  • 篩選器清單規則：篩選器清單中與元素或載入資源相符的特定規則 (例如 EasyList)。

您也可以使用「Rendering」分頁，以紅色醒目顯示廣告框架。

捲動

如果 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> 元素時，瀏覽器會將其放入頂層。

為協助您以視覺化方式呈現頂層元素，「元素」面板會在 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> 元素旁邊。按一下這個徽章即可開啟「媒體」面板，並對媒體進行偵錯。

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

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

彈出式視窗

彈出式視窗是任何具有 popover 屬性的元素，適用於各種互動模式，包括工具提示、快訊、浮動式訊息等。這類元素旁邊會顯示 popover 徽章。

這個徽章會切換旁邊的 top-layer 徽章，該徽章會連結至 #top-layer 容器中的對應元素。

在下方預覽畫面中查看「popover」徽章：

  1. 在預覽畫面中，按一下「TOGGLE POPOVER」。
  2. 檢查顯示的彈出式視窗。

  3. 在 DOM 樹狀結構中，按一下 <div popover> 元素旁的 popover 徽章。「Elements」面板會顯示 top-layer 徽章。

    彈出式視窗徽章，位於具有彈出式視窗屬性的元素旁。

  4. 按照「頂層」一節中的步驟操作。

詳情請參閱 https://web.dev/learn/css/popover-and-dialog。

Starting-style

@starting-style 規則定義元素在網頁上算繪前的初始樣式。如果元素要從 display: none 以動畫形式進入，就必須設定這個屬性，因為元素需要一個狀態才能以動畫形式進入。這類元素旁邊會顯示 starting-style 徽章。

這個徽章會切換 @starting-style 規則中的樣式，方便你查看動畫效果。

在下列預覽畫面中，找出 starting-style 徽章：

  1. 在預覽畫面中，按一下「OPEN POPOVER」。
  2. 檢查顯示的彈出式視窗。

  3. 在 DOM 樹狀結構中，切換 <div popover> 元素旁的 starting-style 徽章。

    元素旁邊的起始樣式徽章，附有 @starting-style 規則。

  4. 在「元素」>「樣式」分頁中，觀察動畫的運作情形和套用的樣式。

詳情請參閱「為彈出式視窗建立動畫」。

Custom-element

在 DOM 樹狀結構中，自訂 HTML 元素 (以連字號標記名稱或自訂內建元素的 is="..." 屬性識別) 旁邊會顯示 custom-element 徽章。

按一下徽章，即可前往「來源」面板中的相關程式碼。

DOM 樹狀結構中，自訂 HTML 元素旁的自訂元素徽章。