Chrome DevTools 怎样找出未使用的 CSS

想找出页面里可能没有被用到的 CSS，可以直接使用 Chrome DevTools 的 Coverage 面板。它会在一次录制中统计页面加载和交互实际触碰到的 CSS，再按资源展示总字节、未使用字节和使用比例。最稳妥的流程是：先只筛选 CSS，重新加载页面并走完关键状态，再点开样式表查看逐行结果，最后回到源码确认是否真的可以删除。

官方文档：https://developer.chrome.com/docs/devtools/coverage?hl=zh-CN

本文中的界面图是原创操作说明图，不是 Chrome 实际截图，也不代表某个线上页面已经完成录制。

先从 Command Menu 打开 Coverage

打开要分析的页面和 DevTools，确保 DevTools 窗口处于焦点状态。按 Ctrl+Shift+P（Windows、Linux、ChromeOS）或 Command+Shift+P（macOS）打开 Command Menu，输入 coverage，选择 Show Coverage。Coverage 会出现在 DevTools 的 Drawer 中；也可以从右上角的更多选项进入 More tools → Coverage。

打开后先不要急着看数字。先确认面板顶部有录制按钮、采集范围下拉框和资源过滤输入框，这几个控件决定后面结果的含义。

把采集范围限制为 CSS

Coverage 同时支持 JavaScript 和 CSS。本文只解决未使用 CSS 的定位，因此把顶部范围切换为 CSS only 或等价的 CSS 筛选项。这样汇总表不会被脚本资源干扰，未使用字节也更容易和样式表对应。

如果面板提供 Per function 和 Per block 两种粒度，可以先使用较粗的代码块粒度快速找出候选文件，再在源码中确认具体选择器。不同页面和版本的控件文案可能略有差异，但目标都是限定采集对象和粒度，而不是立即删除规则。

开始前还要决定是否包含扩展内容脚本。普通网站排查通常保持默认关闭，只有在确实需要分析扩展注入代码时才打开；否则报告里会混入与页面自身无关的资源。

重新加载并走完页面状态

点击 Coverage 面板中的重新加载或开始录制按钮。页面会重新加载，Coverage 会记录加载阶段使用到的代码；录制继续进行时，再主动点击菜单、打开弹窗、切换标签、进入关键路由和改变响应式状态。操作结束后点击停止录制，面板才会把本轮数据固定为可读的汇总结果。

1. 先用一次干净的重新加载建立基线。
2. 按真实用户路径打开首屏之外的组件，例如筛选器、对话框和折叠菜单。
3. 如果页面有多条路由，分别录制关键入口；单次录制不能代表整个站点。
4. 停止录制后再分析，不要把一次尚未覆盖交互的中间结果当成删除依据。

Coverage 的“未使用”只表示这一次采集期间没有被触发。一个为弹窗、打印样式或其他路由准备的选择器，在当前页面状态中可能是红色或灰色，但并不等于它在整个产品中无用。

从资源汇总表找出候选样式表

录制停止后，先看资源汇总表，而不是直接改 CSS。常用字段可以这样读：

可以在过滤框中输入资源路径的一部分，也可以使用 CSS 过滤项缩小列表。优先看未使用比例高且确实属于当前应用的文件；第三方库、主题包和按路由拆分的样式表，要先确认它们的加载职责。

点开资源，逐行定位未使用规则

点击汇总表中的 CSS 资源，DevTools 会把它带到 Sources 面板，并在预览中显示逐行使用情况。绿色区域表示本轮被使用，红色或灰色区域表示本轮没有被使用，颜色只是采集结果的可视提示，不是 CSS 语法错误。

进入源码后，先把候选规则记下来，再回到项目中搜索对应选择器。需要特别留意组合选择器、媒体查询、伪类、动画状态和自定义属性：单次页面交互没有触发它们，不代表其他用户路径不会触发。

如果资源来自压缩文件或构建产物，Coverage 中看到的行号可能不适合直接编辑。此时应根据 source map 或构建映射找到源文件，确认删除后仍覆盖构建入口和其他页面，再由项目自己的构建流程重新生成 CSS。

不要把一次红色结果直接当成删除清单

清理 CSS 前，至少补做三类复查：

• 状态复查：打开弹窗、菜单、表单错误态、加载态和空数据态，重新录制。
• 路由复查：对不同页面入口分别采集，不要只用首页结果代表整个应用。
• 环境复查：区分开发构建、生产构建、主题切换和响应式断点，确认当前资源确实属于要发布的版本。

当一个选择器在多个场景都没有被触发，而且源码搜索也找不到动态拼接、模板引用或组件按需加载的证据，才适合把它列入清理候选。删除后仍要走项目原有的构建、页面回归和视觉检查流程。

常见问题

为什么所有 CSS 看起来都很少使用？

通常是因为只录制了首屏，没有操作页面的菜单、弹窗或其他路由。先扩大真实交互范围，再比较第二次录制结果；不要为了让比例好看而修改筛选条件。

能不能按一次 Coverage 结果批量删除 CSS？

不建议直接批量删除。结果描述的是本轮页面状态，不能覆盖未打开的路由、媒体查询和异步组件。更安全的做法是把逐行候选带回源码，结合构建入口和回归页面逐项确认。

Coverage 和 CSS Overview 是一回事吗？

不是。Coverage 关注本轮录制中哪些代码被使用，并能进入资源逐行查看；CSS Overview 更偏向从页面整体统计颜色、字体、媒体查询和潜在无效声明。两者可以互补，但本文的“找未使用 CSS”入口是 Coverage。

最后可以用一句话确认流程是否完成：Coverage 已限定为 CSS，页面在录制中走过关键状态，资源表已筛出候选文件，点击资源后能在 Sources 中定位逐行结果，并且任何删除决定都经过了路由和状态复查。