徽章參考資料

Sofia Emelianova
Sofia Emelianova
GitHub

透過「元素」面板中的徽章，切換各種疊加層，並加快 DOM 樹狀結構的導覽速度。

顯示或隱藏徽章

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

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

「徽章設定」選單。

「元素」面板會在 DOM 樹狀結構中，於適當元素旁顯示所選徽章。接下來的章節會說明各個徽章。

查看來源

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

「查看來源」徽章。

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

  1. 在 Chrome 中，對網頁按一下滑鼠右鍵，然後選取「檢查」。
  2. 在「元素」面板中，按一下 <html> 標記旁的 view-source 徽章。
  3. 在「來源」面板中檢查網頁原始碼。

格線

如果 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 徽章，然後觀察疊加層。

彈性重疊廣告。

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

如要瞭解如何偵錯彈性版面配置，請參閱「檢查及偵錯 CSS 彈性方塊」。

開發人員工具可以偵測部分廣告影格並加上標記。這類影格旁邊會顯示 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> 元素時，瀏覽器會將其放入頂層。

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

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

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

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

媒體

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

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

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

彈出式視窗

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

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

在下列預覽畫面中找出 popover 徽章：

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

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

    具有 Popover 屬性的元素旁邊會顯示 Popover 徽章。

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

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

起始樣式

@starting-style 規則會定義元素在網頁上顯示前的初始樣式。如果元素要從 display: none動畫進入，就必須使用這個修飾符，因為元素需要動畫進入的狀態。這類元素旁邊會顯示 starting-style 徽章。

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

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

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

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

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

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

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