怎么利用谷歌浏览器的Coverage面板找出未使用的多余CSS和JS代码？

Chrome 的 Coverage 面板能精准标出当前页面哪些 CSS 和 JS 代码压根没被用上——你不需要手动逐行排查冗余资源，打开这个工具就能直观看到红色标记。不过，很多开发者第一次用它的时候都会踩坑：录了半天，数据全是绿的，或者红的假阳性一堆。下面把正确用法拆开讲透。

先明确一点：Coverage 面板不会在你刷新页面后自动采集数据，它只响应你主动触发的“录制”动作。打开方式很简单——按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac） 输入 Show Coverage 回车，面板就会出现在底部边栏。注意，如果开发者工具停靠到了右侧，Coverage 标签可能被挤出去，得先恢复底部停靠（右键标题栏→Dock to bottom）再操作。

打开并启动 Coverage 录制

面板出现后，点击左上角那个带循环箭头的按钮（Reload and start recording），页面会重新加载并开始记录。这一步很关键——只按一次就够了，不要反复点，除非你要测不同的路由。

覆盖真实用户路径以确保统计准确

Coverage 只记录你“这次操作”中实际触发的代码。漏掉一个下拉菜单、没滚动到底部、没切换 Tab 页，对应区域的 JS 和 CSS 就会被误标成红色（看起来是废物，其实是没触发而已）。

所以你得模拟完整的用户行为：

• 等页面完全加载，确认首屏内容渲染完毕；
• 手动点击导航栏、展开所有下拉菜单、切换全部 Tab 页；
• 滚动到底部，触发懒加载区块；
• 填写表单字段并提交，验证交互逻辑；
• 如果是单页应用（SPA），每个路由页面都要单独点↻重新录制一次——路由切换不会自动重置统计。

这一步做完，表格里出现的百分比数据才真实可信，不会有“看似没用其实关键”的假阳性结果。

定位具体未使用的 CSS 规则

找到覆盖表格里一条红色的 CSS 文件名（比如 app.css），点击它，DevTools 会自动跳转到 Sources 面板并定位该文件。核心看每行左边的彩色标记条：绿色代表该行被解析且至少匹配了一个 DOM 元素；红色代表整行没参与任何样式计算过程。

鼠标悬停在红色标记行上，会提示“This rule is not used”。右键选择“Reveal in Styles pane”，如果右侧 Styles 面板里完全不显示这条规则，说明它连解析都没进入，删除风险很低；如果显示但被划掉，那是被更高优先级样式覆盖了——不是“未使用”，不要误删。

注意：@media (max-width: 768px) 内的规则在桌面大窗口下必然标红，这是正常的，不是 bug。千万别一看到红就删，得结合你的响应式断点来审。

识别 JS 中未执行的代码段

Coverage 对 JS 的判定更严格：只标记 V8 引擎实际解析并执行过的字节。import 了但没调用的函数、动态 import() 后没触发的模块、条件分支里没进入的代码块，全部显示成红色。

点击红色 JS 文件名，进入 Sources 面板看行级标记。绿行代表执行过，红行代表整行未被 V8 执行（包括函数声明本身，如果那个函数从来没被调用过）。

需要警惕的是 polyfill 和框架 runtime 代码（比如 core-js、regenerator-runtime）。不要因为 Coverage 标红就直接删——它们可能只在旧浏览器或特定错误场景下才生效，必须结合你的浏览器兼容性目标人工判断。

过滤干扰项并导出关注范围

在 Coverage 表格顶部的搜索框里输入 -node_modules -dist，可以快速排除第三方依赖和构建产物，只聚焦业务代码。如果项目用了 Terser 压缩，Coverage 统计基于压缩后的代码，但 source map 映射回原始文件可能导致高亮错位——遇到这种情况，最好关掉压缩再测一次，或者用 PurgeCSS 这类静态分析工具交叉验证。

点击表格右上角三个点图标，选择“Export”可以导出 CSV。注意这个文件不包含行号信息，不能直接用来批量删除，只能作为索引参考。