Chrome DevTools Coverage 怎么找未使用资源：启动覆盖率并按文件确认 JS/CSS 占比

如果页面首屏加载了很大的 JavaScript 或 CSS 包，先别急着删除代码。Chrome DevTools 的 Coverage 面板可以把一次加载和交互中的资源使用情况列出来：绿色表示已使用，灰色表示这次采集没有执行到。最稳妥的做法是先采集、再按文件确认，最后把结果当作优化线索，而不是直接当成“整个站点都没用到”。

先记住三个判断：Coverage 记录的是一次具体页面流程；底部百分比会受到当前筛选条件影响；未使用字节不等于可以安全删除，因为另一条用户路径可能仍然需要它。

从 Command Menu 打开 Coverage 面板

打开目标页面的 DevTools，按 Command + Shift + P（Windows/Linux 使用 Ctrl + Shift + P）打开 Command Menu，输入 coverage，选择 Show Coverage 并回车。面板会出现在 Drawer 中。也可以点右上角的 More options，进入 More tools > Coverage。

打开后先看操作栏：这里有覆盖范围下拉框、过滤框、资源类型筛选和导出按钮。首次排查建议先保持默认页面范围，不要一开始就用 URL 过滤，否则可能看不到同一页面加载的其他脚本或样式表。

用 Reload 开始一次可复现的采集

在 Coverage 面板顶部选择 Per function 或 Per block，然后点击面板中央的 Reload 图标。DevTools 会重新加载页面，记录加载阶段使用到的代码，并在你继续点击、展开菜单或切换组件时持续记录。要回答“首屏为什么带了大包”，就先只采集首屏；要回答“打开弹窗后哪些代码才会执行”，就把打开弹窗的动作也纳入同一次流程。

采集过程不要随意刷新或跳到无关页面。等目标动作完成后，点击操作栏的 Stop instrumenting coverage。停止后再读表格，避免边操作边比较数字导致结果变化。

按文件和类型确认未使用字节

表格里的 URL 是被分析的资源地址，Type 区分 CSS、JavaScript 或两者，Total Bytes 是资源总字节数，Unused Bytes 是本次流程未执行的字节数。使用可视化条时，灰色部分代表未使用，绿色部分代表使用；先按 Unused Bytes 较大的文件排序，再判断它是否属于页面确实需要的公共包。

需要缩小范围时，在操作栏输入 URL 片段；旁边的下拉框可以只看 CSS 或 JavaScript。底部状态栏显示当前筛选条件下的使用百分比，所以切换类型或过滤 URL 后，要重新理解这个百分比的分母。点击某一行，Sources 面板会打开对应资源，并在行号左侧用灰色竖线标出未使用行，适合确认“未使用”落在哪段代码附近。

导出结果并避免误删资源

确认筛选范围后，可以点击 Export coverage 导出报告，或把资源 URL、Total Bytes、Unused Bytes 和页面操作写进排查记录。一个文件在当前采集中显示大量灰色，只能说明它没有被这次流程执行到；它可能在登录后、错误页、移动端布局或另一个路由中使用。

因此建议至少做两轮：第一轮只覆盖首屏和主流程，第二轮覆盖高频弹窗、表单校验或异步模块。两轮都显示未使用、且 Sources 中确认是可拆分的独立模块时，才适合交给构建配置或代码拆分方案继续处理。Coverage 能帮你定位候选范围，不能替代测试、依赖分析和发布前回归。

相关问题

Coverage 的使用百分比为什么会变？因为它会随筛选条件变化，底部数字只针对当前显示的资源。

Per function 和 Per block 怎么选？想要更细的函数级观察可选 Per function；只需要快速判断代码块是否执行，可选 Per block，最终仍应结合文件和页面流程解释。

未使用 CSS 是否可以直接删除？不建议。先覆盖更多页面状态和路由，再结合构建产物、回归测试和 Sources 位置做拆分或清理决定。