Chrome DevTools的Coverage工具可识别未使用的CSS规则：通过Coverage面板启动录制、Sources面板逐行验证、Performance联动记录，或命令菜单过滤分析，精准定位冗余样式。
一、通过Coverage面板启动覆盖率分析
如果您希望识别网页中未被实际渲染使用的CSS规则，Chrome DevTools提供内置的Coverage工具，可动态记录页面加载与交互过程中CSS和JavaScript的真实执行情况。该工具以颜色标记代码使用状态，便于快速定位冗余样式。
1、在目标网页中右键选择“检查”，或按 Ctrl+Shift+I（Windows/Linux） / Cmd+Option+I（Mac） 打开开发者工具。
2、点击右上角三个点图标，选择“More tools” → “Coverage”。若未显示，可先按 Ctrl+Shift+P（Windows/Linux） / Cmd+Shift+P（Mac） 打开命令菜单，输入 coverage 并选择“Show Coverage”。
3、Coverage面板打开后，点击左上角红色圆形录制按钮旁的循环箭头图标，即“Reload and start recording”，页面将自动刷新并开始采集覆盖率数据。
立即学习“前端免费学习笔记（深入）”；
4、等待页面完全加载并完成关键用户交互（如展开菜单、切换标签页等），确保覆盖典型使用路径。
5、录制结束后，Coverage面板将列出所有加载的CSS与JS文件，每行显示文件路径、大小、使用百分比及类型。其中绿色背景表示已执行/已应用的代码段，红色背景表示未使用。
二、在Sources面板中逐行验证CSS使用状态
该方法用于深入确认某条CSS规则是否真正参与了样式计算与渲染，避免因覆盖率统计时机导致的误判（例如仅在滚动后生效的媒体查询规则）。
1、在Coverage面板中，点击任一CSS文件名（如 style.css），DevTools将自动跳转至Sources面板并定位到该文件。
2、观察每行代码左侧的彩色标记条：绿色条表示该行CSS被浏览器解析并成功应用于至少一个DOM节点，红色条表示该行未参与任何样式计算。
3、将鼠标悬停于红色标记行，DevTools会显示提示“This rule is not used”，并高亮其对应的选择器及声明块。
4、右键点击该行，选择“Reveal in Styles pane”，可在右侧“Styles”选项卡中查看该规则是否被其他更高优先级规则覆盖或被display:none等属性间接屏蔽。
三、启用Performance联动覆盖率记录
此方式适用于需结合页面加载性能瓶颈同步分析CSS冗余的场景，尤其适合单页应用（SPA）中延迟加载或条件注入的样式表。
1、打开DevTools，切换至“Performance”面板。
2、点击右上角齿轮图标进入设置，勾选“Record coverage while performance tracing”选项。
3、点击左上角录制按钮（黑色圆点），执行完整用户流程（如路由跳转、组件挂载、动画触发）后停止录制。
4、在Performance时间轴下方的“Coverage”摘要区域，点击“View coverage”，即可跳转至Coverage面板并加载本次性能录制期间的精确覆盖率数据。
5、注意此时显示的覆盖率基于真实运行时行为，对动态插入的style标签、CSS-in-JS生成的规则同样有效。
四、使用命令菜单快捷启动并过滤CSS结果
当项目包含大量第三方CSS资源时，该方法可快速聚焦自有样式文件，排除干扰项，提升分析效率。
1、保持DevTools处于焦点状态，按 Ctrl+Shift+P（Windows/Linux） / Cmd+Shift+P（Mac） 呼出命令菜单。
2、输入“coverage”，选择“Show Coverage”并回车。
3、在Coverage面板顶部的搜索框中，输入项目特有的CSS文件关键词（如“app-”、“main.”、“_theme”），列表将实时过滤仅显示匹配路径的文件。
4、对筛选后的文件逐一点击，检查其内部红色标记行是否属于可安全移除的旧版主题类、废弃组件样式或A/B测试残留规则。
5、确认前，可临时在“Styles”面板中禁用某条红色规则，观察页面视觉是否变化，无变化即为高置信度冗余代码。
