精准定位“躺平”代码：Chrome Coverage工具详解

想精准定位网页中那些“躺平”的JavaScript代码和从未生效的CSS规则吗？Chrome开发者工具里的Coverage功能，就是为此而生的利器。

它能动态分析页面运行时实际用到的代码，并用直观的颜色区分“已执行”和“未使用”的部分，帮你一眼看穿资源冗余。

下面这五种启用方法，总有一款适合你的工作流。

一、通过命令菜单调出Coverage面板

这是最通用、最快捷的方式，不受开发者工具界面布局的影响。

操作步骤：

• 在目标网页中按下 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）。
• 在命令菜单中输入“Show Coverage”并选择。
• Coverage面板将在底部边栏出现。
• 点击面板左上角的 刷新图标，页面将重载并开始记录覆盖率数据。

二、通过“更多工具”菜单启用Coverage

如果你更习惯图形化操作，这个方法很直观。

操作步骤：

• 右键点击网页空白处选择“检查”，或使用快捷键 Ctrl+Shift+I 打开开发者工具。
• 点击右上角的三个点菜单。
• 依次选择 More tools → Coverage。

如果面板未出现，请检查开发者工具是否处于默认布局状态。

三、启用Performance联动覆盖率记录

此方法适合分析特定交互过程中的代码使用情况，例如页面首屏加载或按钮点击响应。

它能将覆盖率采集与性能时间轴绑定，对于分析单页应用中延迟加载的样式和脚本特别精准。

操作路径：

• 打开开发者工具的 Performance 面板。
• 点击右上角的齿轮设置图标。
• 勾选 Record coverage while performance tracing 选项。
• 点击录制按钮开始性能分析，并执行你的用户操作流程。
• 停止录制后，即可在结果中同时查看时间轴火焰图和详细的文件覆盖率统计。

四、通过Sources面板快捷触发覆盖率分析

如果你正在Sources面板调试代码，不想切换面板打断思路，可以使用此方法。

它不会显式打开Coverage面板，但会默默开始采集数据。

操作步骤：

• 确保在Sources面板中。
• 按下 Ctrl+Shift+P 或 Cmd+Shift+P 打开命令菜单。
• 输入并执行 Coverage: Start instrumentation and reload page。
• 页面刷新后，采集开始。完成后，可在Sources面板左侧的文件树中直接看到每行代码的覆盖状态标记。

五、使用地址栏协议直接激活Coverage调试模式

此方法稍显硬核，通过启动参数强制启用Coverage的底层能力。

适合需要集成到自动化测试流程，或想要稳定复现某种覆盖率行为的开发环境。

操作步骤：

1. 关闭所有Chrome窗口。
2. 通过终端（或命令行）用以下命令启动Chrome（请根据你的系统调整路径）：
   google-chrome --remote-debugging-port=9222 --enable-features=DevToolsCoverage
3. 启动后，在地址栏访问 chrome://inspect。
4. 点击“Configure”按钮，添加 localhost:9222 作为调试目标。
5. 在远程目标列表中找到你的页面，点击“inspect”。
6. 之后即可通过前面提到的命令菜单等方式使用Coverage功能。

《夸克》非常好用的免费AI浏览器

下载APP查看