Coverage面板能直接标出未被浏览器计算应用的CSS规则，但必须完整触发所有用户路径（如悬停:hover、调整窗口宽度以激活@media、SPA路由切换后重新录制），否则伪类和动态状态类会被误标为未使用；正确打开方式是按Ctrl+Shift+P或Cmd+Shift+P输入Show Coverage，确保面板可见后点击左上角“Reload and start recording”按钮启动录制。
Coverage 面板能直接标出哪些 CSS 规则没被浏览器计算应用，但必须完整触发所有用户路径，否则大量伪类、媒体查询、动态状态类会被误标为“未使用”。
怎么正确打开并启动 Coverage 录制
Coverage 不会自动监听页面——你得手动触发一次重载+录制。常见失败原因是只点了红色圆点却没刷新页面，或面板被挤出视图。
- 按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）调出命令菜单 - 输入
Show Coverage并回车，确保 Coverage 面板出现在底部边栏（若不可见，先右键 DevTools 标题栏 →Dock to bottom） - 点击左上角带循环箭头的按钮（
Reload and start recording），不是旁边单独的红色圆点
为什么 hover 或 media 查询总显示红色？
Coverage 判定的是“是否参与过样式计算”，不是“是否写在文件里”。桌面端不悬停，:hover 规则就不会被标记为绿色；窗口宽度没缩到 @media (max-width: 768px) 范围内，整段规则就恒为红色——这不是误报，是准确反映当前环境下的实际应用状态。
- 必须真实触发：鼠标移入按钮、键盘
Tab进入焦点、滚动使懒加载区块进入视口、手动调整浏览器窗口宽度 - 对 SPA 页面，切到新路由后要再点一次
Reload and start recording，否则统计仍沿用旧路由数据 - 伪类如
:focus-within、:has()必须有对应 DOM 结构且被真实交互激活，Coverage 才会识别
如何定位某条具体 CSS 规则是否真冗余
文件级百分比（如 app.css 22% used）只是起点，真正要删的是行级未使用规则。Coverage 在 Sources 面板中用颜色条标记每行，但需人工确认是否可删。
立即学习“前端免费学习笔记（深入）”；
- 在 Coverage 表格中点击 CSS 文件名（如
main.css），自动跳转到 Sources 面板 - 看每行左侧标记条：绿色 = 至少匹配一个元素并参与计算；红色 = 整行未进入样式计算流程
- 鼠标悬停红色行，提示
This rule is not used；右键选Reveal in Styles pane，若右侧 Styles 面板完全不显示该规则，大概率可删；若显示但被划掉，说明被更高优先级样式覆盖，不是“未使用” - 搜索框输入
-node_modules -dist过滤第三方包，避免把core-js或框架 runtime 误当冗余代码
真正难的不是找红色行，而是判断它“为什么没被触发”：是用户路径遗漏？是条件渲染没走到？还是本就该删？Coverage 给的是事实，不是结论——它告诉你“没执行”，但不告诉你“能不能删”。
