Chrome DevTools Coverage面板能标出当前加载与交互中未使用的CSS/JS字节，但红色不等于可删除：需用Cmd/Ctrl+Shift+P输入Show Coverage后点↻录制，覆盖所有路由与交互，再通过Sources面板色条及Styles面板交叉验证是否真未生效。
Chrome DevTools 的 Coverage 面板能帮你看到哪些 CSS 和 JS 字节在当前页面加载与交互中没被用到，但它不是“一键删代码”的开关——关键在怎么用、怎么验证、怎么避坑。
Coverage 面板怎么开、怎么录才有效
别只点一次刷新就下结论。Coverage 统计的是「这次你真实走过的路径」，不是全量快照：
- 按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入 Show Coverage 回车调出面板
- 必须点面板左上角带循环箭头的 Reload and start recording 按钮——不是手动按 F5
- 单页应用（SPA）要逐个访问 /home、/profile、/settings 等路由，每换一个都点一次 Reload coverage
- 所有可交互状态都要触发：展开折叠菜单、悬停按钮看 :hover、滚动到底部、提交表单、模拟网络失败、点击 loading 中的按钮
红色不等于可删，常见假阳性场景
某条 CSS 标红，删了却出问题？大概率它只是“这次没轮到”：
-
@media (min-width: 1200px)在 900px 宽度窗口下必红，这是正常行为 - JS 动态插入的样式，比如
document.styleSheets[0].insertRule('.btn-primary{...}', 0)，Coverage 完全看不见 - 通过
el.classList.add('is-active')或setAttribute('class', ...)加的类名，录制时没触发就不会被标记为已用 - CSS-in-JS 库（如 Emotion、Styled Components）生成的运行时样式，不会出现在原始 .css 文件里，Coverage 对它无感知
怎么交叉验证，避免误删
单靠 Coverage 下删除决定太危险，得配合其他手段反向确认：
- 在 Elements 面板右键某个元素 → Break on > attribute modifications，再手动触发疑似功能（如点击开关），看是否动态加 class 或 style
- 全局搜索项目代码里的
classList.add、className +=、setAttribute('class'等调用，把拼出来的类名正则写进 PurgeCSS 的safelist（例如/^is-.+$/、/^theme-.+$/） - 在 Sources 面板点开标红的 CSS 文件，悬停红色行看提示 “This rule is not used”，再右键选 Reveal in Styles pane：如果右侧 Styles 里完全不显示这条规则 → 可疑；如果显示但被划掉 → 是被覆盖，不是未用
过滤干扰项，聚焦业务代码
Coverage 会把 core-js、regenerator-runtime、Vue/React runtime 这类基础模块标成“95% 未覆盖”，但这不等于它们能删：
- 在 Coverage 表格顶部搜索框输入
-node_modules -dist，快速隐藏第三方包 - 对疑似 polyfill 的文件，右键 → Block URL，刷新页面看是否报错；无异常再结合构建产物（如
webpack --display-modules）交叉确认 - 压缩 + source map 开启时，Coverage 统计的是压缩后字节，但高亮映射回原始文件，容易错位。开发环境建议关掉压缩：
optimization.minimize: false - 导出的覆盖率报告（.json 或 .csv）不含行号，不能直接当删除清单；所有红色高亮行，都需人工点进 Sources 面板逐行确认
