Chrome DevTools

第一篇  第二篇

使用 Coverage 选项卡查找未使用的 JavaScript 和 CSS

Chrome DevTools 中的 Coverage 选项卡可以帮助您找到未使用的 JavaScript 和 CSS 代码。 删除未使用的代码可以加快页面加载速度并节省移动用户的蜂窝数据。

概述

传送未使用的 JavaScript 或 CSS 是 Web 开发中的常见问题。 额外的代码会减慢您的页面加载速度。如果用户在移动设备上访问该页面，则额外的代码会耗尽他们的蜂窝数据。

打开覆盖选项卡

打开命令菜单。开始键入coverage，选择Show Coverage 命令，然后按Enter 运行该命令。 Coverage 选项卡在 Drawer 中打开。

记录代码覆盖率

单击 Coverage 选项卡中的以下按钮之一：
如果您想查看加载页面所需的代码，请单击【Start Instrumenting Coverage And Reload Page】重新加载。

如果您想查看与页面交互后使用的代码，请单击仪器覆盖率记录。

当您想要停止记录代码覆盖率时，单击停止检测覆盖率并显示结果停止。

分析代码覆盖率

Coverage 选项卡中的表格显示分析了哪些资源，以及每个资源中使用了多少代码。 单击一行以在“源”面板中打开该资源，并查看已使用代码和未使用代码的逐行细分。

【URL】 列是被分析的资源的 URL。
【Type】 列说明资源是否包含 CSS、JavaScript 或两者。
【Total Bytes】 列是资源的总大小（以字节为单位）。
【Unused Bytes】 列是未使用的字节数。
最后一个未命名的列是 【Total Bytes】 和 【Unused Bytes】 列的可视化。 条形的红色部分是未使用的字节。 绿色部分是使用的字节。