Google 為什麼要推出 CSS 格線工具？
CSS 格線是功能非常強大的 CSS 版面配置系統，可讓網頁開發人員建構複雜的 2D 版面配置，並制定規則來規範格線中每個子項項目的大小、對齊方式和排序方式。CSS 格線在 Flexbox 大受歡迎後推出，同時協助開發人員在不需複雜的對齊方法或 JavaScript 輔助版面配置的情況下，提升回應式設計。
CSS 格線相對來說，是全新的版面配置系統，因此難以正確運用 CSS 格線。其語法功能相當多元 (只是搜尋格狀一覽表)，有許多方式可以達到相同的版面配置，靈活調整大小和隱含軌跡的方法會讓你難以判斷版面配置「發展」或「無法正常運作」的原因。因此，我們著手在開發人員工具中提供專屬的 CSS 格線工具，協助開發人員進一步瞭解 CSS 程式碼的運作方式，以及如何找出正確的版面配置。
工具設計
Chrome 和 Edge 的共同努力
CSS 格線工具透過 Chrome 開發人員工具和 Edge 開發人員工具引起注意。我們從一開始就決定攜手合作。我們向這兩個團隊分享產品、工程和設計資源，並每週協調合作來達成這個目標。
功能摘要
CSS 格線工具有三個主要功能：
- 特定格線的永久重疊，有助於取得尺寸和排序資訊
- DOM 樹狀結構中的標記，標示出 CSS 格線容器並切換格線疊加層
- 側欄窗格，可讓開發人員自訂 DOM 疊加層的顯示方式 (例如變更規則的顏色和寬度)
- 「Styles」窗格中的 CSS 格線編輯器
接下來我們將進一步說明。
格線永久疊加層
在開發人員工具中，重疊是一種功能強大的付款方式，可提供個別元素的版面配置和樣式資訊：
這項額外資訊重疊在目標元素上。先前，當遊標開啟開發人員工具時，將滑鼠遊標懸停在格狀檢視畫面上時，疊加畫面會顯示其方塊模型資訊，但會限制醒目顯示在格狀項目的內容，而不會說明原因。我們想要為 CSS 格線疊加層新增兩個主要部分：
- 可顯示更實用的格線資訊，例如「已授權」的尺寸和缺口
- 我們要讓疊加層更固定，以便可以同時查看多個格線，而當我們變更元素樣式時，疊加層資訊就會更新
接著來看看我們如何達成這兩項目標。
授權大小與計算大小
CSS 格線偵錯的其中一個困難部分，是定義格線軌道大小的許多方法。例如，您可以結合像素值、百分比值、分數、重複函式和最低函式，建立多功能音軌大小：
.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));
}
不過，請將這些已授權的音軌大小對應到瀏覽器為我們計算的運算測試群組大小，為了消除這個差距，我們在重疊層中並排放置下列兩項資訊：
點前的字串是編寫的值，點之後的字串則代表實際計算值。
開發人員工具先前無法取得編寫的值。理論上，我們可以自行剖析開發人員工具中的編寫值，並根據 CSS 格線規格計算這些值。這會涉及許多複雜情況，而且基本上就是 Blink 重複努力的成果。因此，Blink 的樣式團隊在協助下，取得樣式引擎提供的全新 API，可顯示「階層式值」。階層式值是 CSS 階層式 CSS 屬性之後的最終有效值。這是在樣式引擎編譯所有樣式表，到實際計算任何值 (例如百分比、分數等) 之後，勝出的值。
我們現在使用這個 API 來在格線疊加層中顯示編寫的值。
永久疊加層
在 CSS 格線工具推出前，開發人員工具的疊加功能簡單明瞭：無論是在 DevTools 的 DOM 樹狀結構窗格，或直接在檢查的頁面中將滑鼠遊標懸停在元素上，畫面上就會顯示重疊說明元素說明。只要將遊標移到其他位置，疊加層就會消失。我們想要改變格線疊加層：可以同時醒目顯示多個格線，而格線疊加層仍可保持運作，而一般的懸停疊加層仍能正常運作。
例如：
不過，開發人員工具中的疊加層設計時，並非採用這個多元素、持續運作的機制 (這是多年前建立的)。因此，我們必須重構重疊設計，才能正常運作。我們在現有的醒目顯示工具套件中新增 GridHighlightTool，該工具之後已發展成全域 PersistentTool，可同時醒目顯示所有永久疊加層。針對每種永久疊加層 (格狀檢視、Flex 等)，永久工具中我們保留了各自的設定欄位。每次疊加螢光筆檢查要繪製的內容時，都會納入這些設定。
為讓開發人員工具控管需醒目顯示的內容，我們為 Grid 永久疊加層建立新的 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 結構中的格線容器。
DOM 樹狀結構變更
既然 Grid 徽章不是只顯示在 DOM 樹狀結構中顯示的徽章，我們希望盡可能簡化加入徽章的功能。ElementsTreeElement 是負責在開發人員工具中建立及管理個別 DOM 樹狀結構元素的類別，已更新為多種設定標記的新公開方法。如果一個元素有多個徽章，這些徽章會按照徽章類別排序，如果同一個類別則按字母順序排列這些徽章。可用類別包括 Security、Layout 等，而 Grid 屬於 Layout 類別。
此外，從一開始，我們就內建了無障礙功能支援。每個互動式徽章都提供預設和有效的 aria-label，而唯讀徽章則會將其徽章名稱做為 aria-label。
我們如何取得即時風格更新？
許多 DOM 變更會即時反映在開發人員工具的 DOM 樹狀結構中。舉例來說，新加入的節點會立即顯示在 DOM 樹狀結構中，移除的類別名稱也會立即消失。我們希望格線徽章狀態也能夠反映相同的最新資訊。然而，這種做法確實很難實作，因為在 DOM 樹狀結構中顯示的元素無法計算樣式更新時，開發人員工具無法接收通知。如要得知元素何時變成或停止做為格線容器，現有的方法就是持續查詢瀏覽器的每個元素的最新樣式資訊。費用高昂。
為方便前端掌握元素樣式更新時間，我們新增了用於樣式更新輪詢的 CDP 方法。如要取得 DOM 節點樣式更新，我們會先告知瀏覽器要追蹤哪些 CSS 宣告。如果是格狀徽章，我們會要求瀏覽器追蹤：
{
"display": "grid",
"display": "inline-grid",
}
然後我們傳送輪詢要求，當「Elements」面板中的 DOM 節點有「追蹤」樣式更新時，瀏覽器就會將更新過的節點清單傳送給 DevTools，並解析現有的輪詢要求。當開發人員工具想再次收到樣式更新通知時，就可以傳送這項輪詢要求，不必持續從每個節點輪詢後端。開發人員工具也可以將新的清單傳送至瀏覽器，藉此變更追蹤的 CSS 宣告。
版面配置窗格
雖然 DOM 樹狀標記有助於讓使用者更容易找到 CSS 格線，但有時我們想要查看特定網頁中所有 CSS 格線清單，並且輕鬆開啟或關閉永久重疊，藉此對版面配置進行偵錯。因此，我們決定針對版面配置工具建立專屬的側欄窗格。如此我們才有專門用來收集所有格線容器的空間，並設定所有格線疊加層選項。透過這個「Layout」窗格，我們也可以在這裡加入日後大量版面配置的工具 (例如 Flexbox、Container 查詢)。
透過計算樣式尋找元素
為了在「Layout」窗格中顯示 CSS 格線容器清單，我們需要依計算樣式尋找 DOM 節點。然而，這並不是簡單易懂的，因為當開發人員工具開啟時，開發人員工具不一定能掌握所有 DOM 節點。相反地，開發人員工具只會知道「少數」節點子集 (通常位於 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
這可讓 DevTools 前端取得網頁中的 CSS 格線容器清單 (可能透過 iframe 和陰影根層級穿插)，並在「Layout」窗格中算繪這些容器。
結語
CSS 網格工具是首創支援 Web Platform 功能的開發人員工具設計工具專案之一。並在開發人員工具中推出許多基本工具 (例如永久重疊、DOM 樹狀結構標記和「Layout」窗格)，為 Flexbox 和容器查詢等 Chrome 開發人員工具中的版面配置工具奠定基礎。並奠定了 Grid 和 Flexbox 編輯器的基礎，可讓開發人員透過互動方式變更格線和 Flexbox 對齊方式。我們之後會逐一說明。
下載預覽頻道
建議您使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您使用最新的開發人員工具、測試最先進的網路平台 API，以及在使用者操作之前在網站上找出問題！
與 Chrome 開發人員工具團隊聯絡
使用下列選項，在文章中討論新功能和異動，或與開發人員工具相關的任何其他內容。
- 透過 crbug.com 提供建議或意見。
- 如要回報開發人員工具問題，請在開發人員工具中依序點選「更多選項」
>「說明」 >「回報開發人員工具的問題」。 - 在 @ChromeDevTools 張貼推文。
- 歡迎前往開發人員工具的 YouTube 影片或開發人員工具的 YouTube 影片提供新功能留言。