CSS Overview 面板用于全局扫描全站 CSS 使用情况，识别未使用的声明、颜色和字体冗余，需手动启用并生成报告；Unused declarations 精确到属性值，Colors 和 Font info 揭示隐性重复，Coverage 面板交叉验证删除安全性。
Chrome 的 CSS Overview 面板不是用来查某条样式“为什么没生效”，而是帮你一眼看清全站 CSS 的使用全景——哪些颜色、字体、媒体查询被高频使用，哪些声明压根没人调用。它不依赖单页交互路径，也不需要你手动点开所有下拉菜单，适合快速扫描项目级冗余。
打开并触发分析
CSS Overview 默认关闭，需主动启用：
- 打开 DevTools（F12 或右键 → 检查）
- 按 Cmd + Shift + P（macOS）或 Ctrl + Shift + P（Windows/Linux），输入 Show CSS Overview 并回车
- 点击面板右上角的 Generate report 按钮，等待几秒完成分析
聚焦「Unused declarations」定位无效规则
在生成的报告中，直接看 Unused declarations 模块：
- 它列出所有被识别为“未使用”的 CSS 声明（非整条规则，精确到具体属性值，比如
color: #ff6b6b或margin-top: 24px） - 每条都带可点击链接，点击后跳转到 Sources 面板对应行，高亮显示该声明
- 注意：它只标记「从未参与计算」的声明，不包括被更高优先级覆盖的情况；若某声明出现在多个选择器中，只要任一匹配就视为已使用
结合 Colors 和 Font info 发现隐性冗余
颜色和字体模块常暴露被忽略的重复定义：
立即学习“前端免费学习笔记（深入）”；
-
Colors 中若出现大量相近色值（如
#333、#333333、rgb(51, 51, 51)），说明缺乏设计系统约束，存在视觉与维护冗余 - Font info 若显示同一字体家族有 8 种 weight 值但仅 2 种实际渲染，大概率是引入了整套字体文件却只用了一小部分
- 点击任意颜色或字体条目，可反向定位到使用它的所有元素和 CSS 规则，方便批量归并
交叉验证 Coverage 面板确认删除安全
CSS Overview 找出的是“未使用的声明”，Coverage 面板验证的是“整条规则是否匹配过任何元素”：
- 对 Overview 中标出的 unused 声明，去 Coverage 面板重新录制完整用户路径（含悬停、弹窗、路由切换）
- 若对应规则在 Coverage 中也呈灰色（100% 未使用），且确认无 JS 动态添加 class 或 Shadow DOM 场景，基本可安全删除
- 特别注意伪类（
:hover）、媒体查询断点内的规则——它们在 Overview 中可能被列为 unused，但在 Coverage 中只在对应状态触发才显绿
