chrome开发者工具coverage功能可检测未执行js和未应用css，支持五种启用方式：命令菜单、更多工具菜单、performance联动、sources面板快捷触发、地址栏协议启动。
如果您在谷歌浏览器中希望检测网页中未被实际执行的JavaScript代码或未被应用的CSS规则，可利用开发者工具内置的Coverage功能进行可视化分析。该功能通过动态采集运行时代码使用状态，以颜色标记区分已用与未用部分，辅助定位冗余资源。以下是多种开启并使用Coverage检查的具体方法：
一、通过命令菜单调出Coverage面板
此方式适用于所有Chrome版本，不依赖菜单可见性，能快速启用Coverage功能，尤其适合面板被隐藏或界面定制后的环境。
1、在目标网页中按下 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS） 打开命令菜单。
2、在输入框中键入 Show Coverage，从下拉列表中选择该项。
3、Coverage面板将出现在开发者工具底部边栏，显示为独立标签页。
4、点击面板左上角的 ↻ 刷新图标，页面将自动重载并开始录制覆盖率数据。
二、通过“更多工具”菜单启用Coverage
该路径为图形化操作入口，适合初学者或需明确导航路径的用户，直接从开发者工具顶部菜单触发，无需记忆快捷键。
1、右键网页任意空白处，选择 检查，或使用快捷键 Ctrl+Shift+I 打开开发者工具。
2、点击开发者工具右上角的三个垂直圆点图标，打开扩展菜单。
3、依次选择 More tools → Coverage。
4、若Coverage未立即出现，可再次点击该菜单项，或确认开发者工具处于默认布局状态。
三、启用Performance联动覆盖率记录
此方式将覆盖率采集与性能时间轴同步绑定，适用于需分析首屏加载、交互响应等关键路径中代码使用情况的场景，尤其对单页应用中延迟注入的样式与脚本更精准。
1、打开开发者工具，切换至 Performance 面板。
2、点击右上角齿轮图标进入设置，勾选 Record coverage while performance tracing。
3、点击顶部录制按钮（圆形红点），开始性能追踪与覆盖率联合采集。
4、执行完整用户流程后停止录制，结果中将同时包含时间轴火焰图与按文件粒度的覆盖率统计。
四、通过Sources面板快捷触发覆盖率分析
当已处于Sources面板工作流中时，可跳过面板切换步骤，直接启动录制，提升调试连贯性；该方法隐式启用Coverage，不显式展示面板但实时生成数据。
1、确保开发者工具已打开，并处于 Sources 面板。
2、按下快捷键 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS） 调出命令菜单。
3、输入 Coverage: Start instrumentation and reload page 并回车。
4、页面刷新后自动开始采集，完成后可在Sources左侧文件树中查看各资源行级覆盖标记。
五、使用地址栏协议直接激活Coverage调试模式
此方法通过启动参数强制启用Coverage底层能力，适用于自动化测试集成或需稳定复现覆盖率行为的开发/构建环境。
1、关闭所有Chrome实例，确保无其他调试端口占用。
2、在终端中执行以下命令启动Chrome：google-chrome --remote-debugging-port=9222 --enable-features=DevToolsCoverage（Linux/macOS）或对应Windows路径。
3、访问 chrome://inspect，点击 Configure 按钮添加 localhost:9222 作为调试目标。
4、在远程目标列表中找到当前页面，点击 inspect，随后通过命令菜单启用Coverage。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
