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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

覆盖率面板可帮助您查找未使用的 JavaScript 和 CSS 代码。移除未使用的代码可以加快网页加载速度，并节省用户的移动数据流量。

分析代码覆盖率。

概览

在 Web 开发中，交付未使用的 JavaScript 或 CSS 是一个常见问题。 例如，假设您想在网页上使用 Bootstrap 的按钮组件。如需使用按钮组件，您需要在 HTML 中添加指向 Bootstrap 样式表的链接，如下所示：

...
<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>
...

此样式表不仅包含按钮组件的代码，它包含 Bootstrap 所有组件的 CSS。但您未使用任何其他 Bootstrap 组件。因此，您的网页会下载许多不需要的 CSS。此额外的 CSS 会造成以下问题：

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

借助覆盖率面板，您可以记录网页，查看 CSS 和 JavaScript 资源的总使用字节数和未使用字节数报告，并在来源面板中跟踪代码。

打开“覆盖率”面板

  1. 打开开发者工具。
  2. 打开命令菜单。

  3. 开始输入 coverage，选择 Show Coverage 命令，然后按 Enter 键运行该命令。抽屉中会打开覆盖范围面板。

    “覆盖率”面板。

或者，在右上角，依次选择 more_vert 更多选项 > 更多工具 > 覆盖率。

记录代码覆盖率

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

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

  2. 如需开始录制，请点击面板中央的 重新加载按钮。覆盖率面板会重新加载网页，捕获加载网页所需的代码，并在您与网页互动时继续记录。

  3. 如需停止记录代码覆盖率，请点击面板操作栏中的 停止检测覆盖率并显示结果。

分析代码覆盖率

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

点击某一行可在来源面板中打开相应资源，并查看所用代码和未用代码的逐行细分。任何未使用的代码行都会在左侧带有行号的列旁边标记为灰色竖线。

代码覆盖率报告。

  • 网址列是所分析资源的网址。
  • 类型列会显示资源包含的是 CSS、JavaScript 还是两者兼有。
  • “总字节数”列是资源的总大小（以字节为单位）。
  • 未使用的字节数列显示的是未使用的字节数。
  • 使用情况可视化图表列直观呈现了总字节数列和未使用的字节数列。柱状图的灰色部分表示未使用的字节数。绿色部分表示已用字节数。

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

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

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

如需在报告中添加扩展程序代码，请开启 内容脚本。

如需导出报告，请依次点击 导出覆盖面。