大家好，我是小艺。本文介绍了在CSS级别对DevTools架构所做的更改。本文重点介绍CSS在DevTools中的历史工作方式，以及我们如何在DevTools中现代化我们的CSS以准备（最终）迁移到用于在JavaScript文件中加载CSS的Web标准解决方案。DevTools中CSS的先前状态DevTools以两种不同的方式实现CSS：一种用于DevTools遗留部分中使用的CSS文件，另一种用于DevTools中使用的现代Web组件。对于第一个遗留部分，我们可以通过打开Chromium源码大致猜出它的实现：Chromium源码的DevTools中的CSS实现是多年前定义的，现在已经过时了。DevTools一直坚持使用module.json模式，那么我们来看看这个文件的具体形式：module.json这些CSS文件会放在同一个目录下。为了将它们添加到DevTools中，您需要注册RequiredCSS以用于加载要调用的文件的确切路径。然后它的调用如下：constructor(){...this.registerRequiredCSS('ui/legacy/components/quick_open/filteredListWidget.css');...}取出CSS文件的内容后，将内容插入到`constoutput=LitHtml.html`HelloWorld`总结道，一个潜在的解决方案是使用@import或.相反，我们选择找到一种方法将CSS文件作为CSSStyleSheet对象导入，这样我们就可以使用它的adoptedStyleSheets属性将它添加到ShadowDom（DevTools已经使用ShadowDOM几年了）。关于ShadowDOM，可以参考：https://developers.google.com/web/fundamentals/web-components/shadowdom使用CSS的新基础设施我们需要一种方法将CSS文件转换成CSSStyleSheet对象，这样我们就可以方便的操作它在TypeScript文件中。最终，我选择了放弃Rollup和webpack进行转换。可能的原因是在构建过程中，将任何打包器添加到生产构建中都可能存在潜在的性能问题。我们与Chromium的GN构建系统的集成使捆绑更加困难，因此捆绑器往往无法与当前的Chromium构建系统很好地集成。相反，我们探索了使用当前GN构建系统为我们进行此转换的选项。新的解决方案涉及使用adoptedStyleSheets将样式添加到特定的ShadowDOM，同时使用GN构建系统生成可以被文档或ShadowRoot采用的CSSStyleSheet对象。//CustomButton.ts//ImporttheCSSstylesheetcontentsfromaJSfilegeneratedfromCSSImportcustomButtonStylesfrom'./customButton.css.js';importotherStylesfrom'./otherStyles.css.js';exportclassCustomButtonextendsHTMLElement{…connectedCallback():void{//Addthestlestotheshadowrootscopethis.shadow.adoptedStyleSheets=[customButtonSheets=[自定义按钮.ts]];}}使用adoptedStyleSheets有几个好处，包括：它正在成为现代标准。防止重复的CSS。只对ShadowDOM应用样式，避免CSS文件中重复的类名或ID选择器引起的问题。轻松迁移到未来的Web标准，例如CSS模块脚本和导入断言。此解决方案的唯一警告是导入语句需要导入.css.js文件。为了让GN在构建过程中生成CSS文件，我们编写了generate_css_js_files.js脚本。构建系统现在处理每个CSS文件并将其转换为默认导出CSSStyleSheet对象的JavaScript文件。因为我们可以导入CSS文件并轻松采用它。此外，我们现在可以轻松缩小生产版本，从而节省文件大小。iconButton.css.js生成的示例：conststyles=newCSSStyleSheet();styles.replaceSync(//Inproduction,wealsominifyyourCSSstyles/`${isDebug?output:cleanCSS.minify(output).styles}/*#sourceURL=${fileName}*/`/);exportdefaultstyles;FollowingPlans到目前为止，ChromiumDevTools中的所有Web组件都已迁移到使用新的CSS基础结构，而不是使用内联样式。registerRequiredCSS的大部分遗留用法也已迁移到新系统。剩下的就是尽可能多地删除module.json文件，并将您当前的基础架构迁移到将来实现CSS模块脚本！请参阅[1]https://developer.chrome.com/blog/modernising-css-infra-in-devtools/[2]https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/Treeoutline.ts[3]https://developer.chrome.com/blog/migrating-to-web-components
