Chrome DevTools Coverage面板可标出未参与样式计算的CSS规则，但红色不等于可删除：需用Cmd/Ctrl+Shift+P输入Show Coverage后点击↻录制，覆盖所有交互与路由，并通过Sources面板色条及Styles面板交叉验证是否真未生效。
Coverage 面板能直接标出哪些 CSS 规则在当前页面加载与交互中**根本没参与样式计算**，但它的结果不是“删就完事”的清单——漏操作、错视口、动态类名都会让它高亮不该删的代码。
怎么打开 Coverage 面板并正确启动录制
别点开面板后手动刷新页面，那不会触发采集。必须用带循环箭头的按钮重载：Reload and start recording（或命令菜单输入 Show Coverage 后点它）。
- 快捷键优先：按
Cmd+Shift+P（macOS）或Ctrl+Shift+P（Windows/Linux），输入Show Coverage回车 - 点左上角
↻按钮，页面自动刷新，开始记录 —— 这一步跳过，Coverage 数据就是空的 - 确保开发者工具是默认布局；如果用了自定义 Dock 或隐藏了底部边栏，Coverage 标签可能被挤掉或不可见
- 单页应用（SPA）必须在每个路由下单独点一次
↻，切换路由不重置统计
Coverage 显示某条 CSS 是红色，但删了就崩
红色只代表「这次录制中没匹配任何元素」，不等于逻辑上无用。常见假阳性：
-
@media (max-width: 768px)内的规则，在桌面窗口宽度下必标红 —— 正常，不是 bug -
:hover、:focus-within、:is(.a, .b)中的部分分支，Coverage 不会主动触发，得你手动悬停/点击/滚动才能变绿 - JS 动态添加的 class，比如
el.classList.add('is-open')，Coverage 录制时没点开菜单，这条规则就永远红着 -
display: none容器里的子元素样式，即使后续 JS 显示了它，Coverage 也不会回溯 —— 因为初始渲染阶段没计算
如何交叉验证某条红色 CSS 真能删
不能只信 Coverage 表格里的百分比。得进源码层确认它是否真没生效：
- 在 Coverage 表格里点击红色的 CSS 文件名（如
main.css），跳转到Sources面板 - 看每行左侧的色条：绿色 = 该行被解析且至少匹配一个元素；红色 = 整行未参与样式计算
- 鼠标悬停红色行，提示
This rule is not used，右键选Reveal in Styles pane—— 如果右侧Styles标签页里压根没出现这条规则，说明它连解析都没进，大概率可删 - 反过来，如果
Styles里能看到它，但被划掉（strikethrough），那是被更高优先级样式覆盖，不是“未使用”，Coverage 不管这种
为什么 Coverage 结果和 PurgeCSS 输出不一致
两者原理完全不同：Coverage 是运行时真实行为采集，PurgeCSS 是静态字符串匹配。所以：
立即学习“前端免费学习笔记（深入）”；
- PurgeCSS 会把
btn--primary当成白名单，只要 HTML/JS 里出现过这个字符串就保留整条规则；Coverage 则不管有没有字符串，只看浏览器有没有真把它算进最终样式 - PurgeCSS 对
classList.add('text-' + theme)这种拼接类名完全无感，Coverage 也抓不到 —— 但 Coverage 至少能告诉你「这个主题模式下，.text-dark 没被用过」 - 如果你用的是 CSS-in-JS（如 Emotion），Coverage 能看到生成的 style 标签内容，但 PurgeCSS 默认扫不到这些 runtime 插入的规则
- 导出 Coverage 的 CSV 不含行号，不能直接喂给脚本批量删除；它只是辅助你定位，删之前还得人工翻
Sources验证
class="old-button"，只要这条 CSS 规则本身有语法错误（比如少了个 }），它就会整块失效，Coverage 就会标红 —— 但问题不在“冗余”，而在“坏了”。 
