google-chrome-extension - Chrome 开发者工具 -> 来源 -> 覆盖范围

Question

我使用 Coverage 来识别目标网页上未使用的 CSS 和 JavaScript 代码。这极大地帮助减少了加载时间。但现在我遇到了一个问题，当我在小型设备上查看我的页面时，似乎缺少下拉菜单的 css 代码(或不确定的 javascript 代码)，该菜单应转换为汉堡菜单。

所以我的问题是覆盖率如何计算未使用的代码。它是否只对当前浏览器 View 执行此操作(在响应式设计的情况下可能不使用所有 css 代码？)

如果这是真的，我怎么能找出真正没有使用的东西。尝试各种分辨率并多次运行覆盖率？

有人遇到同样的问题吗？

Answer 1

覆盖面板是“实时的”，随着您使用页面，将使用更多的 CSS 和 JS。

我的意思是，当您第一次加载页面时，渲染和交互所需的所有 CSS 和 JS 都将以绿色突出显示并且是必需的。如果您随后打开菜单，CSS 将在使用时变为绿色。如果您从未在覆盖面板运行时打开菜单，它将不会根据需要计算 CSS。

因此，因为当您运行覆盖面板时不需要您的菜单 CSS 代码，并且您删除了菜单的 CSS，您显然会遇到问题。

您有点误用了覆盖面板，它更旨在帮助您优化 critical CSS或查找完全未使用的库。

如果您想使用它来识别根本未使用的 CSS 和 JS，您必须将屏幕大小调整到每个断点(以考虑不同的屏幕尺寸和不同的布局用于手机、平板电脑等)，打开每个菜单项，网站所有区域的选项卡，正确和错误地填写所有表格等，以确保涵盖所有状态并使用相关的 CSS 和 JS。

如果您确实设法成功执行了上述操作，那将显示一个页面的覆盖率，但其他页面呢？您将不得不在那里重复该过程以确保您没有删除所需的样式。正如您所想象的那样，如果没有错误，这是不可能成功的!

相反，您应该使用覆盖面板来识别“首屏”内容所需的项目，因为这意味着您可以在初始页面 HTML 中内嵌任何关键的 CSS 和 JS，并获得不到 1 秒的 First Contentful Paint 等。(同样，您需要在此处调整屏幕大小以考虑不同的断点，但您不需要打开菜单等。)

不要使用它来尝试识别未使用的东西，除非你绝对确定它们不会被需要(例如，如果错误地包含了一个没有被使用的整个库，你可以安全地删除那个。)