Chrome 开发者工具中的 Coverage 面板可帮助您找到未使用的 JavaScript 和 CSS 代码。移除未使用的代码可加快网页加载速度,并节省用户的移动数据流量。
概览
交付未使用的 JavaScript 或 CSS 是 Web 开发中的一个常见问题。 例如,假设您要使用 Bootstrap 的按钮组件 。要使用按钮组件,您需要将一个链接 在 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>
...
此样式表不仅包含按钮组件的代码,它 包含 Bootstrap 的所有组件的 CSS。但您并未使用 其他任何引导组件。这样,您的网页就会下载大量 不需要的 CSS 文件这种额外的 CSS 会 原因:
- 多余的代码会减慢网页加载速度。请参阅阻塞渲染的 CSS。
- 如果用户通过移动设备访问网页,额外的代码会占用 移动流量
打开“覆盖率”面板
- 打开命令菜单。
开始输入
coverage
,选择 Show Coverage 命令,然后 按 Enter 键运行该命令。覆盖率面板随即会在以下位置打开: 抽屉式导航栏。
记录代码覆盖率
若要捕获代码覆盖率,请执行以下操作:
如需设置覆盖范围,请在覆盖率面板顶部的操作栏中,从下拉列表中选择按函数或按块。
如需开始录制,请点击 refresh 开始检测覆盖率并重新加载页面。 覆盖率面板会重新加载网页,捕获加载网页所需的代码,并在您与网页互动时继续录制。
如需停止记录代码覆盖率,请点击 stop_circle 停止插桩覆盖率并显示结果。
分析代码覆盖率
覆盖率面板中的表格会显示分析了哪些资源,以及每项资源中使用了多少代码。
点击任意一行即可在来源面板中打开相应资源,并查看已使用代码和未使用的代码的逐行细分。任何未使用的代码行都会在列的旁边以红色行标记,列的左侧则是行号。
- 网址列是所分析资源的网址。
- 类型列会指明资源是否包含 CSS、JavaScript 或者两者兼有
- Total Bytes 列是资源的总大小(以字节为单位)。
- Unused Bytes 列是未使用的字节数。
- 最后一个未命名列是 Total Bytes 和 未使用的字节数列。条形图的红色部分是未使用的字节。通过 灰色部分是用字节。
若要按网址过滤报告,请在操作栏的过滤器中指定该网址。
覆盖率面板底部的状态栏会显示所用代码的百分比。状态栏会将过滤条件考虑在内。
在过滤栏旁边的下拉列表中,您可以选择全部,或者仅选择 CSS 或 JavaScript 以在报告中显示。
要在报告中添加扩展程序代码,请选中内容脚本check_box。
若要导出报告,请点击下载 导出覆盖率数据。