coverage面板需手动启动并全程录制，:hover/@media标红属正常现象，行级未使用规则须结合人工验证与交互测试判断冗余性。
Coverage 面板能标出未参与样式计算的 CSS 行，但“标红”不等于“可删”——必须配合用户路径触发和人工验证，否则大量 :hover、@media、动态类名会被误判。
怎么正确启动 Coverage 并避免基础误操作
Coverage 不是常驻功能，也不会自动监听页面。常见失败是点了红色圆点却没刷新，或只录了首屏就停止。
- 必须用
Cmd+Shift+P（Mac）或Ctrl+Shift+P（Win/Linux）输入Show Coverage呼出面板，不能靠记忆快捷键 - 点击左上角带循环箭头的按钮
Reload and start recording，不是旁边孤立的红色圆点 - 若面板未出现，右键 DevTools 标题栏 →
Dock to bottom确保它在底部边栏可见 - SPA 项目切路由后必须再点一次
Reload and start recording，否则覆盖率数据仍沿用旧路由
为什么 :hover、@media 总显示红色
Coverage 判定的是“是否被浏览器实际计算过”，不是“是否存在”。桌面端没悬停，.btn:hover 就不会进样式计算流程；窗口宽度没缩到 @media (max-width: 768px) 范围内，整块规则恒为红色——这是准确反映，不是 bug。
- 伪类如
:focus-within、:has()必须有对应 DOM 结构且被真实交互激活，Coverage 才会标记为绿色 - 响应式断点里的规则，在非匹配视口下标灰属正常，不能直接删
-
:is()和:where()中的部分分支常被误标为未使用，因浏览器内部解析限制，需人工核对选择器逻辑
如何定位某条 CSS 规则是否真冗余
文件级百分比（如 app.css 22% used）只是起点。真正要删的是行级未使用规则，且得排除“被覆盖”和“未渲染”两种假阳性。
- 在 Coverage 表格中点击 CSS 文件名（如
main.css），跳转到Sources面板，看每行左侧颜色条：绿色 = 至少匹配一个元素并参与计算；红色 = 整行未进入样式计算流程 - 鼠标悬停红色行，提示
This rule is not used；右键选Reveal in Styles pane，若右侧Styles面板完全不显示该规则，大概率可删；若显示但被划掉，说明被更高优先级样式覆盖，不是“未使用” - 执行
getComputedStyle(document.querySelector('.your-selector'))，返回空对象或无预期属性，说明选择器确实未命中；若返回了值但 Coverage 标灰，大概率是元素在录制期间尚未渲染（如懒加载区块） - 搜索框输入
-node_modules -dist过滤第三方包，避免把core-js或框架 runtime 误当冗余代码
Coverage 后怎么安全清理：别直接删，先做三件事
覆盖率数据是事实，不是结论。它告诉你“没执行”，但不告诉你“能不能删”。真正难的是判断“为什么没被触发”。
- 在
Elements面板右键目标元素 →Break on > attribute modifications，刷新看 JS 是否动态增删了class或属性，导致 Coverage 漏判 - 临时注释掉整段 CSS，在页面完整交互（点击、悬停、滚动、表单提交）过程中观察是否有视觉异常；Coverage 不捕获运行时变化
- 对疑似动态拼接的类名（如
class={`btn ${type}`}），检查 JS 文件是否被purgecss --content路径覆盖，否则会被误删
最易被忽略的一点：Coverage 统计的是当前页面的运行时状态，它看不到 Shadow DOM 内部的样式计算，也看不到 JS 动态插入的 <style></style> 标签——这些必须单独打开 Shadow Root 节点或手动注入后重新录制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
