chrome devtools 不直接修复冗余 css，但可通过 coverage、css overview、sources 面板交叉验证未使用规则，需覆盖所有交互路径、响应式状态及动态类名，避免误删。
Chrome DevTools 本身不直接“修复”冗余 CSS，但能快速定位哪些规则、声明、颜色、字体真正没被用到——关键在用对工具组合，且避开常见误判陷阱。
Coverage 面板只录当前路径，漏交互就等于白看
Coverage 显示某条 .modal-close 规则是红色（未使用），不等于它可删。它只反映你这次录制中是否触发了该样式：
- 必须手动点开所有弹窗、下拉菜单、表单错误态、悬停菜单、移动端折叠栏——Coverage 不会自动模拟这些
- 单页应用（SPA）要逐个访问不同路由（如
/settings、/notifications），每进一个都点一次 Coverage 的Reload and start recording按钮 - 滚动到底部才加载的组件（infinite scroll）、网络异常时的 fallback UI、JS 动态插入的 class（如
el.classList.add('is-loading')），Coverage 完全看不到
CSS Overview 报告里 “Unused declarations” 精确到值，但不告诉你上下文
Unused declarations 模块列出的是从未参与计算的属性值（比如 padding: 12px），不是整条规则。它有用，但容易误导：
- 点击跳转后，可能发现该声明在
@media (min-width: 768px)里，而你当前视口是 400px —— 它不是冗余，只是没命中 - 同一颜色出现
#333、#333333、rgb(51, 51, 51)多次？Overview 的Colors模块会并列标出，说明设计系统缺失，需归并而非删除 - 字体模块显示
font-weight: 100到900全在 CSS 里，但实际渲染只用了400和700？大概率是引入了整套 Web Font 文件，该优化字体加载策略，不是删 CSS
Sources 面板里红条 ≠ 可删，得右键验证真实状态
在 Sources 中看到某行 CSS 是红色背景，别急着删。鼠标悬停提示 This rule is not used 后，务必右键选 Reveal in Styles pane：
- 如果右侧
Styles面板里完全不显示这条规则 → 它连解析都没过，大概率真冗余 - 如果显示但整条被划掉（strikethrough）→ 被更高优先级规则覆盖，比如
.btn.primary { color: blue }覆盖了.btn { color: black }，后者红条是正常现象 - 如果规则出现在
<style></style>标签或 JS 插入的<link>里 → Coverage 根本不统计这部分，红条无意义
真正安全删除前，必须交叉验证 Coverage + Elements + 搜索
单靠 Coverage 下删除结论风险极高。三个动作缺一不可：
- 在 Elements 面板中，右键关键元素 →
Break on > attribute modifications，再手动触发疑似功能（如点击“展开详情”按钮），看是否动态加了 class - 全局搜索项目代码：
classList.add(、className +=、setAttribute('class'、tw`（Tailwind JIT）、css`（Emotion）等，把生成的类名加进 purge 工具的 safelist - 打开 Coverage 后，再打开 Performance 面板，勾选
Record coverage while performance tracing，重放完整用户流，看是否仍有遗漏路径
最常被忽略的一点：Coverage 统计的是「字节是否被浏览器解析并尝试应用」，不是「是否影响最终渲染」。哪怕某条规则因优先级低始终不生效，只要它被加载和解析了，Coverage 就不会标红——它查的是加载链路，不是样式效果链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
