本文將介紹自 Chrome 85 版起，開發人員對開發人員工具中的 CSS-in-JS 支援功能，以及整體來說，CSS-in-JS 的意思，以及開發人員工具和開發人員工具長期支援的一般 CSS 有何不同。
什麼是 CSS-in-JS？
CSS-in-JS 的定義並不明確。大致上來說，這是使用 JavaScript 管理 CSS 程式碼的方法。舉例來說，這可能表示 CSS 內容是以 JavaScript 定義，而且應用程式會即時產生最終的 CSS 輸出內容。
在開發人員工具中，CSS-in-JS 代表使用 CSSOM API 將 CSS 內容插入網頁。一般的 CSS 是使用 <style> 或 <link> 元素插入，且具有靜態來源 (例如 DOM 節點或網路資源)。相對地，CSS-in-JS 通常沒有靜態來源。這裡的特殊情況是，<style> 元素的內容可以使用 CSSOM API 更新，導致來源和實際的 CSS 樣式表不一致。
如果您使用任何 CSS-in-JS 程式庫 (例如 styled-component、Emotion、JSS)，程式庫可能會根據開發模式和瀏覽器，在背景使用 CSSOM API 插入樣式。
以下舉例說明如何使用與 CSS-in-JS 程式庫類似的 CSSOM API 插入樣式表。
// Insert new rule to an existing CSS stylesheet
const element = document.querySelector('style');
const stylesheet = element.sheet;
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');
您也可以建立新的樣式表：
// Create a completely new stylesheet
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('.some { color: blue; }');
stylesheet.insertRule('.some { color: green; }');
// Apply constructed stylesheet to the document
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
開發人員工具中的 CSS 支援
開發人員工具中最常用於處理 CSS 的功能是「Styles」窗格。在「樣式」窗格中，您可以查看特定元素套用的規則，也可以編輯規則並即時在網頁上查看變更。
去年，對於使用 CSSOM API 修改的 CSS 規則所支援的支援程度很有限：您只能查看已套用的規則，但無法編輯。我們去年的主要目標是允許使用「樣式」窗格編輯 CSS-in-JS 規則。有時我們也會將 CSS-in-JS 樣式稱為「建構」，表示這些樣式是使用 Web API 建構而成。
接著就來進一步瞭解開發人員工具中樣式編輯作業的運作方式。
開發人員工具中的樣式編輯機制
在開發人員工具中選取元素後，「Styles」窗格就會顯示。「Styles」窗格會發出名為 CSS.getMatchedStylesForNode 的 CDP 指令，取得套用到元素的 CSS 規則。CDP 是指 Chrome 開發人員工具通訊協定，這個 API 可讓開發人員工具前端取得受檢查網頁的額外資訊。
叫用時，CSS.getMatchedStylesForNode 會識別文件中的所有樣式表，並使用瀏覽器的 CSS 剖析器進行剖析。然後建立一個索引，將每個 CSS 規則與樣式表來源中的位置建立關聯。
您可能會好奇，為什麼需要再次剖析 CSS？這個問題的原因是，瀏覽器本身與 CSS 規則的來源位置無關，因此不會儲存這些規則。不過，開發人員工具需要來源位置才能支援 CSS 編輯功能。我們不希望一般 Chrome 使用者支付效能影響，但我們希望開發人員工具的使用者能夠存取來源位置。這種重新剖析方法能以最少的缺點，滿足這兩種使用情境。
接下來，CSS.getMatchedStylesForNode 實作會要求瀏覽器的樣式引擎提供符合指定元素的 CSS 規則。最後，這個方法會將樣式引擎傳回的規則與原始碼建立關聯，並提供 CSS 規則的結構化回應，讓開發人員工具知道規則的哪個部分是選取器或屬性。可讓開發人員工具獨立編輯選取器和屬性。
接著來看看編輯請注意，CSS.getMatchedStylesForNode 會傳回每項規則的來源位置嗎？編輯時十分重要，變更規則時，開發人員工具會發出另一個 CDP 指令，實際更新網頁。這個指令包含正在更新的規則片段原始位置，以及需要更新片段的新文字。
在後端處理編輯呼叫時，開發人員工具會更新目標樣式表。它也會更新自己維護的樣式表來源複本，並更新更新規則的來源位置。為回應編輯呼叫，開發人員工具前端會恢復剛更新的文字片段的更新位置。
這說明瞭為何在開發人員工具中編輯 CSS-in-JS 無法立即執行：CSS-in-JS 沒有任何實際的來源儲存位置，以及「CSS 規則存在於 CSSOM 資料結構中的瀏覽器記憶體中」。
我們如何新增 CSS-in-JS 支援
因此，為支援編輯 CSS-in-JS 規則，我們決定最好的解決方式是建立建構樣式表的來源，讓使用者可以使用上述現有機制加以編輯。
首先建構來源文字。瀏覽器的樣式引擎會將 CSS 規則儲存在 CSSStyleSheet 類別中。如前所述，就是透過 JavaScript 建立例項的類別。建構原始碼的程式碼如下所示：
String InspectorStyleSheet::CollectStyleSheetRules() {
StringBuilder builder;
for (unsigned i = 0; i < page_style_sheet_->length(); i++) {
builder.Append(page_style_sheet_->item(i)->cssText());
builder.Append('\n');
}
return builder.ToString();
}
疊代處理在 CSSStyleSheet 執行個體中找到的規則，然後從中建構單一字串。建立 InspectorStyleSheet 類別的例項時，系統會叫用這個方法。InspectorStyleSheet 類別會納入 CSSStyleSheet 執行個體，並擷取開發人員工具所需的其他中繼資料：
void InspectorStyleSheet::UpdateText() {
String text;
bool success = InspectorStyleSheetText(&text);
if (!success)
success = InlineStyleSheetText(&text);
if (!success)
success = ResourceStyleSheetText(&text);
if (!success)
success = CSSOMStyleSheetText(&text);
if (success)
InnerSetText(text, false);
}
在這段程式碼中，我們看到在內部呼叫 CollectStyleSheetRules 的 CSSOMStyleSheetText。如果樣式表不是內嵌或在資源樣式表中，則會叫用 CSSOMStyleSheetText。基本上，這兩個程式碼片段已經允許對使用 new CSSStyleSheet() 建構函式建立的樣式表進行基本編輯。
特殊情況是指與 <style> 標記相關聯，且使用 CSSOM API 變更的樣式表。在此情況下，樣式表會包含來源文字以及不在來源中的其他規則。為處理這個情況，我們引進了將額外規則合併到來源文字的方法。這裡的順序很重要，因為可以在原始來源文字的中間插入 CSS 規則。舉例來說，假設原始 <style> 元素包含以下文字：
/* comment */
.rule1 {}
.rule3 {}
接著，頁面使用產生下列規則的 JS API 插入一些新規則：.rule0、.rule1、.rule2、.rule3、.rule4。合併作業之後產生的來源文字應如下所示：
.rule0 {}
/* comment */
.rule1 {}
.rule2 {}
.rule3 {}
.rule4 {}
由於規則的來源文字位置必須精確，因此系統會保留原始的註解和縮排。
CSS-in-JS 樣式表的另一項特別之處，在於網頁可隨時變更。如果實際的 CSSOM 規則與文字版本不同步，編輯就會失敗。為此，我們導入了一項稱為 probe，可讓瀏覽器在樣式表發生變化時，讓瀏覽器通知開發人員工具的後端。變更後的樣式表會在下次呼叫 CSS.getMatchedStylesForNode 時同步處理。
完成這些部分後，CSS-in-JS 編輯功能已可正常運作，但我們還是想改善使用者介面，指出是否已建立樣式表。我們已在 CDP 的 CSS.CSSStyleSheetHeader 中新增名為 isConstructed 的新屬性，以便前端正確顯示 CSS 規則的來源：
結論
在此回顧一下，我們介紹了開發人員工具不支援的 CSS-in-JS 相關用途，並逐步介紹支援這些用途的解決方案。這項實作的優點在於，我們可以讓 CSSOM CSS 規則使用一般的原文文字，藉此運用現有功能，而無須在開發人員工具中全面重新設定樣式編輯功能。
如需更多背景資訊，請參閱我們的設計提案或 Chromium 追蹤錯誤，其中包含所有相關修補程式。
下載預覽頻道
建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。
與 Chrome 開發人員工具團隊聯絡
請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。
- 歡迎透過 crbug.com 提出建議或意見。
- 在開發人員工具中，依序點選「更多選項」圖示
>「說明」 >「回報開發人員工具問題」，回報開發人員工具問題。
- 前往 @ChromeDevTools 張貼 Tweet。
- 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。