開發人員工具中的 CSS 格線工具

Changhao Han
Changhao Han
X GitHub

為什麼要製作 CSS 格線工具？

CSS 格線是功能非常強大的 CSS 版面配置系統，可讓網頁開發人員建立複雜的 2D 版面配置，並制定相關規則，說明格線中每個子項目的大小、對齊和順序。在 Flexbox 開始流行後，CSS 格線也隨之推出，這兩者可協助開發人員打造更優質的回應式設計，無須使用複雜的對齊技巧或 JavaScript 輔助版面配置。

由於 CSS 格線是相對較新的版面配置系統，因此也難以正確設定。語法的語法用途廣泛 (只是搜尋「網格一覽表」)，而您可以透過許多方式達到相同的版面配置，且可靈活調整大小及隱含追蹤，更難理解版面配置「沒有」或未正常運作的原因。因此，我們決定在 DevTools 中提供專屬的 CSS 格線工具，讓開發人員能更深入瞭解 CSS 程式碼的運作方式，以及如何取得正確的版面配置。

工具設計

Chrome 和 Edge 的共同努力

CSS 格線工具引起了 Chrome 開發人員工具和 Edge 開發人員工具的注意。我們決定從一開始就合作。我們分享了兩個團隊的產品、工程和設計資源，並每週協調合作，以便實現這項目標。

功能摘要

CSS 格線工具有三項主要功能：

  1. 特定格式的持續疊加層，可協助處理維度和排序資訊
  2. DOM 樹狀結構中的徽章，用於強調 CSS 格線容器和切換格線疊加層
  3. 可讓開發人員自訂 DOM 重疊層顯示效果的側邊欄窗格 (例如變更規則的顏色和寬度)
  4. 「Styles」窗格中的 CSS 格線編輯器

以下將進一步說明。

格線持續重疊

在開發人員工具中，疊加層是強大的工具，可提供個別元素的版面配置和樣式資訊：

ALT_TEXT_HERE

這些額外資訊會疊加在目標元素上方。先前在開發人員工具開啟的情況下，將滑鼠遊標懸停在格線上時，重疊會顯示方塊模型資訊，但只將醒目顯示的內容限制在格線項目，但未說明原因。我們想為 CSS 格線疊加層新增兩個主要部分：

  • 我們希望顯示更多實用的格線資訊，例如作者維度和間距
  • 我們希望讓疊加層保持不變，這樣我們就能同時查看多個格線，並在變更元素樣式時看到疊加層更新格線資訊

接著來看看我們如何達成這兩種目標。

作者設定的尺寸與計算的尺寸

對 CSS 格線進行偵錯時，其中一個困難的地方之一，就是定義格線軌道大小的多種方式。舉例來說，您可以結合像素值、百分比值、分數、重複函式和 minmax 函式，建立多種音軌大小：

.grid-cards {
    display: grid;
    width: 200px;
    height: 300px;
    grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

不過，要將這些已編製的軌道大小對應至瀏覽器計算的已計算的軌道大小，相當困難。為了彌補這項缺陷，我們在疊加層中並排放置這兩項資訊：

ALT_TEXT_HERE

點號前方的字串是作者設定的值，點號後方的字串則代表實際計算的值。

先前，開發人員工具無法取得編寫的值。理論上，我們可以自行在 DevTools 中剖析作者設定的值，並根據 CSS 格線規格進行計算。這會涉及許多複雜的情況，而且基本上只是重複 Blink 的努力。因此，Blink 的樣式團隊在協助下，我們從樣式引擎取得了用於公開「串聯值」的新 API。串聯值是 CSS 屬性在 CSS 階層式之後的最終有效值。這是在樣式引擎編譯完所有樣式表後，但尚未實際計算任何值 (例如百分比、分數等) 前，勝出的值。

我們現在使用這個 API 在格狀疊加層中顯示編寫的值。

永久疊加層

在 CSS 格線工具推出之前，開發人員工具中的疊加層相當簡單：只要將滑鼠游標懸停在元素上，無論是在開發人員工具的 DOM 樹狀圖窗格，或是直接在檢查的網頁上，就會看到描述此元素的疊加層。當您將滑鼠游標移開時，重疊圖層就會消失。對於格線疊加層，我們需要不同的設定：可以同時醒目顯示多個格線，而格線疊加層可以保持不動，而一般懸停疊加層仍可運作。

例如：

ALT_TEXT_HERE

不過，DevTools 中的疊加層並未考量這項多元素持續機制而設計 (疊加層是在多年前建立的)。因此，我們必須重構疊加層設計，才能讓這項功能正常運作。我們在現有的一系列醒目顯示工具中新增了 GridHighlightTool，後來又將其改為全域 PersistentTool，以便同時醒目顯示所有持續性覆蓋圖。對於每種持續性覆蓋層 (格線、Flex 等)，我們會在持續性工具中保留相應的設定欄位。每當疊加高亮顯示器檢查要繪製的內容時，也會納入這些設定。

為了讓 DevTools 控制需要醒目顯示的內容，我們為格線持續疊加層建立了新的 CDP 指令：

# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
  parameters
    # An array of node identifiers and descriptors for the highlight appearance.
    array of GridNodeHighlightConfig gridNodeHighlightConfigs

其中每個 GridNodeHighlightConfig 都包含要繪製哪個節點，以及如何繪製的資訊。這樣一來，我們就能新增多項持續性機制，而不會破壞目前的懸停行為。

即時格線徽章

為了協助開發人員輕鬆切換啟用/停用格線疊加層，我們決定在 DOM 樹狀結構中，在格線容器旁邊新增小徽章。這些徽章也有助於開發人員在 DOM 結構中找出格狀容器。

ALT_TEXT_HERE

DOM 樹狀結構的變更

Grid 徽章並不是我們想在 DOM 樹狀結構中顯示的唯一徽章，因此我們希望盡可能簡化徽章新增程序。ElementsTreeElement 是負責在 DevTools 中建立及管理個別 DOM 樹狀圖元素的類別，已更新為包含幾個新的公開方法，用於設定徽章。如果某個元素有多個徽章，系統會依據徽章類別進行排序，如果徽章屬於同一類別，則會依據名稱的字母順序排列。可用類別包括「Security」、「Layout」等，而「Grid」屬於「Layout」類別。

此外，我們從一開始就內建無障礙支援功能。每個互動式徽章都必須提供預設且有效的 aria-label，而唯讀徽章則會使用 aria-label 名稱。

我們如何取得即時樣式更新？

許多 DOM 變更會即時反映在 DevTools DOM 樹狀結構中。舉例來說，新加入的節點會立即顯示在 DOM 樹狀結構中，而移除的類別名稱也會立即消失。我們希望格狀徽章的狀態也能反映最新資訊。不過，這項做法實在難以實作，因為當 DOM 樹狀圖中顯示的元素獲得計算樣式更新時，開發人員工具無法取得通知。如要得知元素何時會成為格狀容器，唯一的方法就是持續查詢瀏覽器，以取得每個元素的最新樣式資訊。但這麼做「可能」耗用過多資源。

為了讓前端更容易得知元素的樣式何時更新，我們新增了一個 CDP 方法，用於樣式更新輪詢。如要取得 DOM 節點的樣式更新，我們會先告知瀏覽器要追蹤的 CSS 宣告。在格線徽章的情況下，我們會要求瀏覽器追蹤下列項目：

{
  "display": "grid",
  "display": "inline-grid",
}

接著，我們會傳送輪詢要求，如果「元素」面板中 DOM 節點的樣式有追蹤更新，瀏覽器會將更新的節點清單傳送至 DevTools，並解析現有的輪詢要求。當開發人員工具想再次收到樣式更新的通知時，可以傳送這項輪詢要求，而不是持續輪詢每個節點和每個節點的後端。開發人員工具也可以透過傳送新清單至瀏覽器，變更要追蹤的 CSS 宣告。

「Layout」窗格

雖然 DOM 樹狀結構徽章有助於讓使用者更容易找到 CSS 格線，但有時我們會希望在特定頁面中查看所有 CSS 格線清單，並輕鬆切換持續性疊加層的開關狀態，以便偵錯版面配置。因此，我們決定建立專門用於版面配置工具的側欄窗格。這給我們一個專用空間來收集所有格線容器，以及設定格線疊加層的所有選項。這個「Layout」窗格也讓我們可以加入日後會大量使用版面配置的工具 (例如 Flexbox、容器查詢)。

依據計算樣式尋找元素

為了在「Layout」窗格中顯示 CSS 格線容器清單，我們必須依照計算樣式尋找 DOM 節點。這項做法也並非一勞永逸，因為 DevTools 在開啟時並非所有 DOM 節點都已知。相反地，DevTools 只會知道少數節點子集，通常位於 DOM 階層的頂層，只為了讓 DevTools DOM 樹開始運作。基於效能考量，系統只會在收到進一步要求時擷取其他節點。因此必須使用新的 CDP 指令來收集頁面中的所有節點，並根據計算樣式進行篩選：

# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
  parameters
    # Node ID pointing to the root of a subtree.
    NodeId nodeId
    # The style to filter nodes by (includes nodes if any of properties matches).
    array of CSSComputedStyleProperty computedStyles
    # Whether or not iframes and shadow roots in the same target should be traversed when returning the
    # results (default is false).
    optional boolean pierce
  returns
    # Resulting nodes.
    array of NodeId nodeIds

這會讓開發人員工具前端取得頁面中的 CSS 格線容器清單 (可能透過 iframe 和陰影根進行穿戴)，並算繪到「Layout」窗格中。

結論

CSS 格線工具是最早支援 Web Platform 功能的開發人員工具設計工具專案之一。這項工具在開發人員工具中推出了許多基本工具，例如持續重疊、DOM 樹狀圖徽章和「Layout」窗格，為 Chrome 開發人員工具中未來的版面配置工具 (例如 Flexbox 和容器查詢) 鋪路。這也為格線和 Flexbox 編輯器奠定基礎，讓開發人員能夠以互動方式變更格線和 Flexbox 對齊方式。我們日後會再詳細說明。

下載預覽頻道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

與 Chrome 開發人員工具團隊聯絡

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。