覆盖率工具可帮助你查找未使用的 JavaScript 和 CSS 代码。 删除未使用的代码可以加快页面加载速度并保存移动用户的手机网络数据。
查找未使用的代码相对容易。 但是，重构代码库以便每个页面仅附带所需的 JavaScript 和 CSS 可能很困难。 本指南不介绍如何重构代码库以避免未使用的代码，因为这种重构取决于你的技术堆栈。
寄送未使用的 JavaScript 或 CSS 是 web 开发中的一个常见问题。 例如，假设你想要在页面上使用
Bootstrap 按钮组件
。 若要使用按钮组件，需要在 HTML 中添加指向 Bootstrap 样式表的链接，如下所示：
<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 存在问题：
额外的代码会降低页面加载速度。
如果用户在移动设备上访问页面，则额外的代码会使用其手机网络数据。
打开“命令”菜单
。
开始键入
coverage
，选择“
显示覆盖范围
”命令，然后按
Enter
。 “
覆盖”
工具将在
抽屉
中打开。
分析代码覆盖范围
“覆盖”
工具中的表显示已分析的资源，以及每个资源中使用的代码量。 单击某一行可在
“源”
工具中打开该资源，并逐行显示已用代码和未使用代码的明细。
代码覆盖率报告：
代码覆盖率报告中的列：
此页面的某些部分是根据
Google 创建和共享的
作品所做的修改，并根据
Creative Commons Attribution 4.0 International License
中描述的条款使用。
原始页面
在此处
找到，由
凯斯·巴斯克
(技术作家、Chrome DevTools & Lighthouse) 创作。
此作品根据
Creative Commons 署名 4.0 国际许可获得许可
。
