本文介绍了自 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 通常没有静态来源。这种情况的一个特例是，可以使用 CSSOM API 更新 <style> 元素的内容，导致来源与实际 CSS 样式表不同步。
如果您使用任何 CSS-in-JS 库（例如 styled-component、Emotion、JSS），该库可能会在后台使用 CSSOM API 注入样式，具体取决于开发模式和浏览器。
我们来看一些示例，了解如何使用 CSSOM API 注入样式表，这与 CSS-in-JS 库执行的操作类似。
// 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 样式称为 "constructed"，表示它们是使用 Web API 构建的。
我们来深入了解下在开发者工具中修改样式时的运作方式。
开发者工具中的样式修改机制
在开发者工具中选择元素时，系统会显示 Styles 窗格。Styles 窗格会发出一个名为 CSS.getMatchedStylesForNode 的 CDP 命令，以获取适用于相应元素的 CSS 规则。CDP 代表 Chrome DevTools Protocol，它是一个 API，可让开发者工具前端获取有关所检查页面的更多信息。
被调用时，CSS.getMatchedStylesForNode 会识别文档中的所有样式表，并使用浏览器的 CSS 解析器对其进行解析。然后，它会构建一个索引，将每条 CSS 规则与样式表来源中的某个位置相关联。
您可能会问，为什么还需要再次解析 CSS？这里的问题在于，出于性能方面的原因，浏览器本身并不关注 CSS 规则的源位置，因此不会存储这些规则。但开发者工具需要源位置才能支持 CSS 编辑。我们不希望普通的 Chrome 用户支付性能损失，但我们希望开发者工具用户能够访问源代码位置。这种重新解析方法同时解决了这两个用例，且缺点最少。
接下来，CSS.getMatchedStylesForNode 实现会要求浏览器的样式引擎提供与指定元素匹配的 CSS 规则。最后，该方法会将样式引擎返回的规则与源代码相关联，并提供关于 CSS 规则的结构化响应，以便开发者工具了解规则的哪一部分是选择器或属性。它允许开发者工具单独修改选择器和属性。
现在我们来看看如何修改还记得 CSS.getMatchedStylesForNode 会返回每条规则的来源位置吗？这对于修改至关重要。当您更改规则时，DevTools 会发出另一个 CDP 命令来实际更新页面。该命令包含正在更新的规则片段的原始位置，以及需要更新片段的新文本。
在后端，当处理修改调用时，DevTools 会更新目标样式表。它还会更新其维护的样式表来源副本，并更新已更新规则的源位置。为了响应修改调用，开发者工具前端会获取刚刚更新的文本片段的更新位置。
这解释了为什么在开发者工具中修改 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() 构造函数创建的样式表进行基本修改。
一种特殊情况是与已使用 CSSOM API 更改的 <style> 标记相关联的样式表。在这种情况下，样式表包含源文本和源不存在的其他规则。为处理这种情况，我们引入了一种将这些附加规则合并到源文本中的方法。在这种情况下，顺序很重要，因为 CSS 规则可以插入到原始源文本的中间。例如，假设原始 <style> 元素包含以下文本：
/* comment */
.rule1 {}
.rule3 {}
然后，页面使用 JS API 插入了一些新规则，形成以下规则顺序：.rule0、.rule1、.rule2、.rule3、.rule4。合并操作后生成的源文本应如下所示：
.rule0 {}
/* comment */
.rule1 {}
.rule2 {}
.rule3 {}
.rule4 {}
保留原始注释和缩进对于编辑过程非常重要，因为规则的源文本位置必须精确。
CSS-in-JS 样式表的另一个特别之处是页面可以随时对其进行更改。如果实际的 CSSOM 规则与文本版本不同步，修改将不起作用。为此，我们引入了一种所谓的“探测”，让浏览器能够在样式表发生变化时通知开发者工具的后端部分。之后，更改后的样式表将在下一次调用 CSS.getmatchedStylesForNode 期间进行同步。
完成所有这些工作后，CSS-in-JS 修改已经可以正常工作，但我们希望改进界面，以表明是否构建了样式表。我们在 CDP 的 CSS.CSSStyleSheetHeader 中添加了一个名为 isConstructed 的新属性，前端可利用该属性正确显示 CSS 规则的来源：
总结
我们来回顾一下我们的故事，我们了解了开发者工具不支持的与 CSS-in-JS 相关的相关用例，并介绍了支持这些用例的解决方案。这种实现的有趣之处在于，我们能够通过使 CSSOM CSS 规则具有常规源文本来利用现有功能，无需在开发者工具中彻底重新设计样式编辑的架构。
如需了解更多背景信息，请参阅我们的设计方案或 Chromium 跟踪错误，其中引用了所有相关补丁。
下载预览渠道
请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！
与 Chrome 开发者工具团队联系
使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。
- 请通过 crbug.com 提交建议或反馈。
- 在开发者工具中使用更多选项
> 帮助 > 报告开发者工具问题来报告开发者工具问题。 - 请发送电子邮件至 @ChromeDevTools。
- 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。