chrome devtools coverage工具可动态识别未使用的css/js代码，通过颜色标记（绿/红）直观展示执行状态，并支持重载录制、sources面板验证、purgecss静态清理及uncss全站抓取等多维度优化方案。
一、通过Coverage面板启动代码覆盖率分析
如果您尝试在谷歌浏览器中识别当前页面加载与交互过程中未被实际应用的CSS和JavaScript代码，则可利用Chrome DevTools内置的Coverage工具进行动态采集。该工具以颜色标记方式直观呈现每行代码的执行或应用状态，绿色表示已使用，红色表示未使用，便于快速定位冗余样式与脚本。
1、在目标网页空白处右键，选择“检查”，或按 Ctrl+Shift+I（Windows/Linux） / Cmd+Option+I（Mac） 打开开发者工具。
2、点击开发者工具右上角的三个垂直圆点图标，选择“More tools” → “Coverage”。若该选项未显示，可先按 Ctrl+Shift+P（Windows/Linux） / Cmd+Shift+P（Mac） 调出命令菜单，输入 Show Coverage 并回车确认。
3、Coverage面板出现后，点击左上角红色圆形录制按钮旁的循环箭头图标（Reload and start recording），页面将自动刷新并开始采集覆盖率数据。
4、等待页面完全加载，并手动执行典型用户行为：点击导航栏、展开下拉菜单、切换Tab页、滚动至可视区域外、填写并提交表单等，确保覆盖多路径渲染逻辑。
5、录制结束后，Coverage面板将列出所有已加载的JS与CSS文件，每行显示路径、大小、使用百分比及类型；其中红色背景行即为未参与样式计算或脚本执行的代码段。
二、在Sources面板中逐行验证CSS使用状态
该方法用于规避Coverage统计时机局限，例如媒体查询仅在滚动后生效、伪类仅在悬停时触发等情况，通过源码级标记确认某条CSS规则是否真实影响了DOM节点的最终渲染样式。
1、在Coverage面板中，点击任一标红的CSS文件名（如 main.css），DevTools将自动跳转至Sources面板并定位到该文件。
2、观察每行代码左侧的彩色标记条：绿色条代表该行CSS已被解析并成功应用于至少一个DOM节点；红色条代表该行未参与任何样式计算过程。
3、将鼠标悬停于红色标记行，DevTools会弹出提示 "This rule is not used"，并高亮其对应的选择器与声明块。
4、右键点击该红色行，选择 Reveal in Styles pane，右侧“Styles”选项卡将同步定位并显示该规则是否被更高优先级样式覆盖、或因 display: none、visibility: hidden 等属性间接屏蔽。
三、使用命令菜单快捷启用并重载覆盖率记录
当Coverage面板未通过菜单项直接可见时，可通过命令行协议方式强制调用并立即启动录制，适用于快捷调试场景或面板布局异常情况。
1、确保开发者工具已打开，焦点位于任意面板内。
2、按 Ctrl+Shift+P（Windows/Linux） / Cmd+Shift+P（Mac） 唤出命令菜单。
3、输入 Coverage，从下拉列表中选择 Show Coverage，按回车确认。
4、在Coverage面板底部，点击 ↻ Reload and start recording 图标，页面刷新并开始实时采集。
5、完成交互操作后，点击同一图标旁的 Stop recording 按钮终止采集，结果即时更新。
四、借助PurgeCSS自动化清除项目级无用CSS
Coverage工具仅作用于单页运行时快照，无法覆盖整个项目中所有路由、状态与动态注入场景；PurgeCSS则通过静态扫描HTML、JSX、模板等源文件，提取所有可能用到的选择器，反向剔除CSS中未匹配的规则，适合构建流程集成。
1、在项目根目录执行 npm install --save-dev purgecss 安装核心包。
2、创建配置文件 purgecss.config.js，明确指定内容源路径与CSS入口，例如：
content: ['./src/**/*.html', './src/**/*.jsx', './src/**/*.js']，
css: ['./src/styles/*.css']。
3、添加白名单以保留动态类名，例如：
whitelist: ['html', 'body', 'active', 'is-open', /^bg-/, /^text-/]，避免误删Tailwind等工具类框架生成的样式。
4、在package.json的scripts中添加清理命令：
"purge:css": "purgecss --config purgecss.config.js --output ./dist/css/"。
5、执行 npm run purge:css，输出目录将生成仅含已使用规则的精简CSS文件。
五、结合UnCSS远程抓取全站CSS使用情况
UnCSS通过启动真实浏览器实例（基于PhantomJS或Puppeteer），遍历指定URL列表并模拟完整用户行为，捕获各页面实际应用的CSS规则集合，特别适用于多页应用（MPA）或需覆盖SEO渲染路径的场景。
1、全局安装UnCSS：
npm install -g uncss。
2、准备URL清单文件 urls.json，内容为JSON数组格式，例如：
["https://example.com/", "https://example.com/about", "https://example.com/contact"]。
3、执行命令：
uncss -u urls.json -t 5000 style.css > cleaned.css，其中 -t 5000 表示每页等待5秒以确保异步资源加载完成。
4、UnCSS将自动启动无头浏览器，访问每个URL、执行默认滚动与点击动作，最终输出仅含实际渲染所用CSS规则的 cleaned.css。
5、将生成文件替换原CSS引用，并在本地服务器中验证所有交互状态下的样式完整性，重点检查JavaScript动态添加的class是否被正确保留。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
