Chrome DevTools Coverage 怎么找未使用代码：Coverage 面板、重载与红绿条核对

页面首屏速度突然变慢时，先别急着删掉一整套 CSS 或 JavaScript。Chrome DevTools 的 Coverage 面板可以把当前页面加载到的资源全部列出来，用已用字节、未用字节和可视化条带帮你找出最值得优先复查的文件。它适合用来整理待清理的候选清单，不等于打开一个页面就能直接证明某段代码永远不会被使用。

先确认 Coverage 解决的是哪一种问题

Coverage 观察的是一次采集周期内实际执行或匹配到的 CSS、JavaScript 资源。比如页面引用了完整的组件库，但当前页面只展示一个按钮，Coverage 大概率会把其他未用到的组件标成未使用状态。这个信号能说明首屏加载带了多余字节，却不能直接推导成“这些代码在整个站点都没用”。

更建议把它当成拆包、按路由加载和清理第三方依赖的证据入口：先记下资源名和未用比例，再用完整用户流程复测，最后再决定是否修改构建配置。

从 Command Menu 打开 Coverage 面板

打开目标页面的 DevTools，按 Command + Shift + P（macOS）或 Control + Shift + P（Windows、Linux、ChromeOS）唤起 Command Menu，输入 coverage，选中 Show Coverage 直接回车即可打开。官方文档还提供了另一条打开路径：右上角 More options → More tools → Coverage。

面板打开后先扫一眼顶部工具条，不要刚打开就直接把默认结果当成最终报告。这里通常能看到采集范围下拉框、Reload 按钮、停止采集按钮、URL 过滤和资源类型过滤等控件；不同 Chrome 版本的图标位置可能有细微变化，但按钮对应的功能完全不变。

点击 Reload 采集一条可复查的访问路径

1. 在 Coverage 顶部选择 Per function 或 Per block。前者适合快速查看函数级结果，后者能更细致地观察代码块的使用情况。
2. 点击面板中央的 Reload 图标。页面会自动重新加载，Coverage 同步记录加载阶段用到的所有 CSS 与 JavaScript。
3. 等待页面完全稳定后，补做一遍真实操作，比如打开菜单、切换标签、提交本地测试表单，再点停止采集按钮结束记录。
4. 记录资源 URL、Total Bytes、Unused Bytes 和底部显示的使用百分比；如果手动过滤了 URL 或资源类型，底部的百分比数值也会跟着过滤条件同步变化。

只做一次硬刷新，得到的往往只是“首屏覆盖率”，不是完整的业务覆盖率。单页应用的懒加载、弹窗组件和错误页大概率在首次打开时不会执行，清理代码前要把这些路径全部补进采集流程。

读懂绿色、灰色和 Unused Bytes

结果表的 URL 列展示所有被分析的资源，Type 列区分 CSS、JavaScript 或两者混合类型，Total Bytes 是资源总大小，Unused Bytes 是本次采集中没有用到的字节数。Usage Visualization 里的绿色区域表示已用部分，灰色区域表示未用部分。

点击资源行回到 Sources 做行级核对

选中表格里的任意资源行，DevTools 会自动跳转到 Sources 面板。行号左侧的颜色标记能帮你快速定位本次采集执行过和没有执行过的代码。这里拿到的证据比单独一个百分比更有参考价值：你可以把未使用区域对应到具体函数、样式规则或构建产物，再回到源码确认它是否属于其他路由。

对压缩后的 bundle 文件，行号和源码可读性可能受 source map 影响。如果项目启用了 source map，先确认 Sources 能正常映射到源码；否则只靠 bundle 里的颜色标记直接删除内容，风险会明显升高。

导出前的验收清单

• 采集流程至少覆盖首屏、主要菜单、弹窗、表单提交和错误恢复路径。
• 分开查看 CSS 与 JavaScript 两类资源，不要让大文件的单一结果掩盖另一类资源的优化空间。
• 对高 Unused Bytes 文件记录 URL、采集路径、改动候选和回归页面。
• 修改构建配置后重新采集，对比资源体积变化，同时确认真实交互仍能正常运行。
• 需要留档时点击 Export coverage 导出结果；导出的结果只代表本次采集覆盖的范围。

常见问题

Coverage 里的未使用代码是不是可以马上删除？

不是。它只表示本次采集没有覆盖到，其他路由、用户权限或异常分支仍可能需要这段代码。

为什么重新加载后使用百分比会变化？

采集路径、缓存、懒加载和过滤条件都会影响最终结果。先固定页面、操作步骤和过滤条件，再对比两次采集的数据。

CSS 和 JavaScript 能分开看吗？

可以，在 Coverage 工具条的资源类型下拉框中选择 All、CSS 或 JavaScript，分开查看更容易定位构建问题。

点击资源行后看什么最重要？

看未使用标记对应的源码位置，再确认它属于当前路由还是其他页面。不要只看颜色标记，忽略了代码的调用关系。

Coverage 最适合回答“这条访问路径加载了哪些暂时没用到的字节”。把它和真实用户流程、构建产物、source map 及回归结果结合起来，才足以支撑一次安全的拆包或清理操作。