Chrome Coverage面板可精准标出未执行的CSS和JS代码，需先通过命令菜单启动录制并重载页面，再覆盖全部用户交互路径，最后结合Sources面板行级标记与过滤条件定位冗余资源。
你想快速定位网页中哪些CSS样式和JavaScript代码在当前页面加载与用户交互过程中压根没被执行或应用，避免手动逐行排查冗余资源，直接用Chrome内置的Coverage面板就能可视化标出未使用部分。
打开并启动Coverage录制
这一步必须做对，否则后面所有数据都是空的。Coverage不会在你手动刷新后自动采集——它只响应特定触发动作。
按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS） 打开命令菜单，输入 Show Coverage 并回车。
Coverage面板出现在开发者工具底部边栏后，点击左上角带循环箭头的按钮（Reload and start recording），页面将自动重载并开始记录。
立即学习“前端免费学习笔记（深入）”；
注意：如果开发者工具被设置为停靠到右侧或已隐藏底部边栏，Coverage标签可能被挤出视图，此时需先恢复默认布局（右键开发者工具标题栏→Dock to bottom）再操作。
覆盖真实用户路径以确保统计准确
Coverage只记录你“这次”操作中实际触发的代码。漏掉一个下拉菜单、没滚动到底部、没切换Tab页，对应区域的JS和CSS就会被误标为红色。
第一步：等待页面完全加载，确认首屏内容渲染完毕；
第二步：手动点击导航栏、展开所有下拉菜单、切换全部Tab页；
第三步：滚动至页面底部，触发懒加载区块；
第四步：填写表单字段并提交，验证交互逻辑；
第五步：若为单页应用（SPA），在每个路由页面单独点击↻重新录制一次——路由跳转不会自动重置统计。
这一步做完，Coverage表格里才会出现真实可信的百分比数据，而不是一堆“看起来没用但其实关键”的假阳性结果。
定位具体未使用的CSS规则
方法一：在Coverage表格中点击某条红色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等静态分析工具交叉验证。
点击Coverage表格右上角三个点图标，选择“Export”可导出CSV，但注意该文件不含行号信息，不能直接用于删除，仅作参考索引。
