如何通过Chrome DevTools Coverage面板分析压缩CSS的未使用代码？

Chrome DevTools Coverage的现状 #

使用压缩CSS时，Chrome DevTools的Coverage面板会把CSS展示为单行，即便点击格式化按钮美化后，也无法实现非压缩CSS那样的逐行精准标记，手动排查未使用代码的难度确实很高。

实用替代方法与工具 #

• Chrome DevTools Elements面板联动：在Coverage面板定位到目标压缩CSS文件后，切换到Elements面板，选中页面元素查看Styles面板的Matched CSS Rules，直接获取当前元素用到的规则，反向筛选未使用代码。
• PurgeCSS：命令行工具，可分析HTML/JS文件，自动移除未使用的CSS规则。支持处理压缩后的CSS，也能集成到构建流程，输出清理后的代码，还可自定义配置保留特定规则（比如动态生成的类）。
• UnCSS：通过加载页面分析DOM结构，识别并移除未使用的CSS。支持本地文件或远程URL，输出精简后的CSS，适合静态站点和单页应用。
• PostCSS插件组合：用postcss-uncss插件配合CSS压缩工具（如cssnano），在构建阶段先清理未使用CSS，再完成压缩，从源头解决问题。
• Firefox DevTools Coverage：Firefox的Coverage工具对压缩CSS的解析更精准，格式化后能清晰标记已使用和未使用的代码块，部分场景下表现优于Chrome。

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