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

凯切·巴斯克斯
Kayce Basques

Chrome 开发者工具中的“Coverage”标签页可以帮助您查找未使用的 JavaScript 和 CSS 代码。移除未使用的代码可以加快网页加载速度,还可节省移动用户的移动数据网络流量。

分析代码覆盖率。
图 1. 分析代码覆盖率。

概览

提供未使用的 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,选择 Show Coverage 命令,然后按 Enter 键运行该命令。系统会在抽屉式导航栏中打开覆盖率标签页。
“覆盖率”标签页。
图 2. 覆盖率标签页。

录制代码覆盖率

  1. 点击覆盖率标签页中的以下按钮之一:
    • 如果您想查看加载页面所需的代码,请点击 Start Instrumenting Coverage & Reload Page 重新加载
    • 如果您想查看在与网页互动后使用的代码,请点击 Instrument Coverage 图标 录制
  2. 如果您想停止记录代码覆盖率,请点击 Stop Instrumenting Coverage & Show Results 图标 停止

分析代码覆盖率

覆盖率标签页中的表格显示了分析了哪些资源以及每个资源中使用了多少代码。点击某一行即可在来源面板中打开相应资源,并查看已使用代码和未使用代码逐行细分。任何未使用的代码行开头都会有红线。

代码覆盖率报告。
图 3. 代码覆盖率报告。
  • 网址列是所分析资源的网址。
  • Type 列显示资源是否包含 CSS 和/或 JavaScript。
  • Total Bytes 列是资源的总大小(以字节为单位)。
  • Unused Bytes 列是未使用的字节数。
  • 最后一个未命名的列是 Total Bytes 列和 Unused Bytes 列的可视化图表。竖条的红色部分是未使用的字节。绿色部分使用字节。