Coverage面板需手动触发录制：按Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac）输入Show Coverage，点击Reload and start recording，完整覆盖所有用户路径（含SPA路由、伪类、动态交互）后停止，再逐行验证红色标记是否真未使用。
Chrome DevTools 的 Coverage 面板是目前最直接、最轻量的未使用 CSS 排查手段，但它不是“一键扫出冗余”的魔法开关——它只告诉你“哪些规则在当前录制路径下没参与样式计算”，而误删常源于没理解这个前提。
怎么正确启动 Coverage 录制而不白忙活
很多人点了红色圆点就以为开始了，结果数据全是错的。Coverage 不会自动监听页面，必须主动触发重载+录制闭环：
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）呼出命令菜单 - 输入
Show Coverage回车，确保面板出现在底部（若不可见，右键 DevTools 标题栏 →Dock to bottom） - 点击左上角带循环箭头的按钮
Reload and start recording—— 不是旁边单独的红色圆点 - 等页面完全加载、交互走完（比如悬停按钮、展开菜单、滚动到底部），再点右上角
Stop recording
只刷新不录、只录不触发交互、录完没切 SPA 路由，都会让大量 :hover、@media、动态 class 规则恒为红色，但它们其实有用。
为什么 .btn-primary 这类规则标红却不能删
红色只代表“该行 CSS 规则从没匹配过任何元素”，不等于“写错了”或“可安全删除”。常见真因包括：
立即学习“前端免费学习笔记（深入）”；
- DOM 还没挂载完就结束了录制（比如 JS 异步插入的节点）
- 选择器本身不成立：写的是
.btn-primary，但实际 DOM 是class="btn primary"（空格分隔 ≠ 连写） - 被 JS 移除了 class：
el.classList.remove('btn-primary')发生在录制窗口期内 - 规则在
@media (max-width: 768px)里，但你全程用桌面视口测试 - 用了
:is()或:where()，浏览器解析时部分分支未激活，Coverage 无法准确归因
鼠标悬停红色行，提示 This rule is not used 才算初步可信；若提示为空或显示其他信息，大概率是匹配失败而非冗余。
如何定位到具体哪一行 CSS 可删，而不是只看文件级百分比
文件级统计（如 main.css 22% used）只是入口，真正要动手删的是行级标记：
- 在 Coverage 表格中点击 CSS 文件名（如
app.css），自动跳转到Sources面板 - 看每行左侧颜色条：绿色 = 至少一个元素命中并参与计算；灰色/红色 = 整行未进入样式计算流程
- 右键红色行 →
Reveal in Styles pane：- 右侧
Styles面板完全不显示该规则 → 基本可删 - 显示但被划掉（strikethrough）→ 被更高优先级样式覆盖，不是“未使用”，删了可能破布局
- 右侧
- 顶部搜索框输入
-node_modules -dist，过滤第三方包，避免把vue.runtime.esm-bundler.js或core-js当冗余代码处理
真正难的不是找红色行，而是判断它“为什么没被触发”：是漏了用户路径？还是压根不该存在？Coverage 给的是证据，不是结论。
