覆盖率：找出未使用的 JavaScript 和 CSS

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome 开发者工具中的 Coverage 面板可以帮助您找到未使用的 JavaScript 和 CSS 代码。移除未使用的代码可以加快网页加载速度，并节省用户的移动数据流量。

分析代码覆盖率。

概览

提供未使用的 JavaScript 或 CSS 是 Web 开发中的常见问题。 例如，假设您想要在网页上使用引导加载程序的按钮组件。如需使用该按钮组件，您需要在 HTML 中添加指向引导加载程序样式表的链接，如下所示：

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

此样式表不仅包含按钮组件的代码，它包含所有引导组件的 CSS。但您不会使用任何其他引导组件。您的网页正在下载它并不需要的一些 CSS这个额外的 CSS 之所以存在问题，原因如下：

  • 添加额外的代码会降低网页加载速度。请参阅阻塞渲染的 CSS。
  • 如果用户在移动设备上访问网页，这些额外的代码会消耗用户的移动数据流量。

打开“覆盖率”面板

  1. 打开命令菜单。

  2. 开始输入 coverage，选择显示覆盖率命令，然后按 Enter 运行该命令。Coverage 面板会在抽屉式导航栏中打开。

    “覆盖率”面板。

记录代码覆盖率

若要捕获代码覆盖率，请执行以下操作：

  1. 如需设置覆盖率范围，请在覆盖率面板顶部的操作栏中，从下拉列表中选择按函数或按块。

  2. 如需开始录制，请点击刷新 Start instrumenting 覆盖率并重新加载页面 Coverage 面板会重新加载页面、捕获加载页面所需的代码，并在您与页面互动时继续录制。

  3. 如需停止记录代码覆盖率，请点击 stop_circle 停止检测覆盖率并显示结果。

分析代码覆盖率

覆盖率面板中的表格显示了分析了哪些资源以及每项资源使用了多少代码。

点击某一行即可在来源面板中打开该资源，并查看已使用代码和未使用的代码逐行细分。所有未使用的代码行都会用红线标记，列旁边会显示行号。

代码覆盖率报告。

  • 网址列是所分析资源的网址。
  • Type 列显示资源是包含 CSS 和/或 JavaScript。
  • Total Bytes 列是资源的总大小（以字节为单位）。
  • Unused Bytes 列是未使用的字节数。
  • 最后一个未命名的列是直观显示 Total Bytes 和 Unused Bytes 列。竖条的红色部分是未使用的字节。灰色部分使用字节。

若要按网址过滤报告，请在操作栏的过滤条件中指定网址。

覆盖率面板底部的状态栏会显示代码所用代码的百分比。状态栏会考虑过滤因素。

在过滤条件栏旁边的下拉列表中，您可以选择全部，也可以选择仅在报告中显示 CSS 或 JavaScript。

若要将扩展程序代码纳入到报告中，请开启内容脚本check_box。

要导出报告，请点击下载 导出覆盖率。