如何让DevTools Coverage面板展示HTML内联样式的覆盖率

首先明确基础现状：Chrome DevTools的Coverage选项卡默认支持JS代码（含独立.js文件、HTML内联JS）的已使用/未使用占比统计，配合差异高亮可直接区分已调用、未调用的函数，但当前稳定版DevTools默认不会统计HTML中<style></style>标签内的内联CSS覆盖率，针对Gatsby + Styled-components技术栈的站点，可通过以下三种方案实现统计：

• 调整本地构建配置，抽离内联CSS为独立外部文件
  Styled-components在Gatsby构建阶段默认把Critical CSS内联到HTML是首屏性能优化手段，你本地做样式覆盖率排查时，可以安装对应Gatsby生态的样式抽离插件，把构建生成的所有内联样式统一导出为独立的.css静态资源，页面会通过<link>标签加载该外部CSS文件，这类资源可被DevTools Coverage面板自动识别，正常展示覆盖率数据、高亮未使用的样式规则。排查时建议关闭构建阶段的CSS混淆压缩、开启样式SourceMap，方便把统计到的未使用规则映射回对应业务组件的Styled-components代码。
• 开启Chrome Canary的实验性内联覆盖率特性
  目前Chrome Canary（前瞻测试版）已经上线了内联样式覆盖率统计的实验功能，你可以在Canary浏览器中打开DevTools设置，进入实验性功能面板，开启内联样式覆盖率相关的开关，重启DevTools后无需修改任何业务、构建配置，就能直接识别HTML内的<style>标签内容，纳入覆盖率统计范围。需要注意该特性尚未推送到稳定版Chrome，统计结果可能存在小幅误差，仅适合调试使用。
• 临时脚本快速统计方案
  如果只是单次粗略排查、不想修改构建配置，可以在Coverage面板启动录制后，在控制台执行脚本提取页面所有内联<style>标签的内容，动态转化为DevTools可识别的独立样式资源，即可临时拿到这部分样式的覆盖率数据。该方案的缺点是统计结果无法自动映射到源码，适合快速排查冗余样式占比的场景，不适合精准定位未使用的样式规则。

注意：不建议在生产环境构建时把内联CSS抽离为外部文件，会破坏Gatsby默认的首屏关键CSS内联优化，导致首屏加载出现样式闪烁问题，上述配置调整仅建议在本地性能调试阶段使用。

内容的提问来源于stack exchange，提问作者Undistraction