coverage工具能直接标出未参与样式计算的css规则，但仅反映实际触发的状态；必须手动执行cmd/ctrl+shift+p输入show coverage，再点击左上角“reload and start recording”启动录制，并完整覆盖所有交互、响应式断点及spa路由。
Coverage 工具能直接标出整条未参与样式计算的 CSS 规则，但只反映你实际触发过的页面状态——没点开的弹窗、没缩放的响应式断点、没悬停的 :hover，都会被标红，不等于真冗余。
怎么正确启动 Coverage 录制
它不会自动监听，必须手动重载+录制。常见失败是点了红色圆点却没刷新，或面板没打开就按 F5。
- 按
Cmd+Shift+P（Mac）或Ctrl+Shift+P（Win/Linux），输入Show Coverage回车 - 确保 Coverage 面板可见（若隐藏，右键 DevTools 标题栏 → Dock to bottom）
- 点击左上角带循环箭头的按钮
Reload and start recording，不是旁边单独的红色圆点 - 录制前把页面调到目标状态：已登录、菜单展开、视口宽度切到目标断点（如
768px）
为什么 :hover 或 @media 规则总显示红色
红色代表“这次录制中没进入样式计算流程”，不是写错了，而是你根本没触发它。
-
:hover必须真实鼠标移入，或在 Styles 面板里勾选:hov手动激活 -
@media (max-width: 768px)在桌面窗口下必然标红；得手动缩放浏览器宽度再点一次Reload and start recording -
:focus-within、:has()要有对应 DOM 结构且被 Tab 或 JS 真实触发，Coverage 才会识别 - SPA 切换路由后，必须重新点录制按钮，否则统计仍基于旧路径
怎么判断一条红色规则到底能不能删
不能只看颜色。Coverage 不扫描 JS 动态注入、Shadow DOM、CSS-in-JS，也不理解 BEM 变体或运行时拼接的类名。
- 在 Coverage 表格中点击 CSS 文件名，跳转到 Sources 面板，悬停红色行看提示：
This rule is not used才是可删信号 - 右键该行 →
Reveal in Styles pane：如果右侧 Styles 面板完全不显示这条规则，大概率可删；如果显示但被划掉，说明被覆盖，不是“未使用” - 执行
getComputedStyle(document.querySelector('.your-selector'))，返回空对象才佐证未命中；若有值但 Coverage 标红，很可能是元素在录制时还没挂载（如懒加载区块） - 全局搜项目代码里的
classList.add、setAttribute('class'，把动态生成的类名加进 PurgeCSS 的safelist（例如/^is-.+$/）
真正难的不是找到红色行，而是确认它“为什么没被触发”：是漏了用户路径，还是它本就藏在 JS 控制的暗处。Coverage 是快筛工具，不是删除判决书；删之前，至少用 Elements 面板的 Break on attribute modifications 拦一次 class 变更，或者手动走一遍那个被忽略的交互分支。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
