Chrome 开发者工具 -> 来源 -> 覆盖范围
Chrome Developer Tools -> Source -> Coverage
我使用 Coverage 来识别登陆页面上未使用的 CSS 和 JavaScript 代码。这极大地帮助减少了加载时间。但是现在我遇到了一个问题，当我在小型设备上查看我的页面时，下拉菜单似乎缺少 css 代码（或 javascript 代码不确定）应该转换成汉堡菜单。
所以我的问题是覆盖率如何计算未使用的代码。它是否只对当前浏览器视图执行此操作（在响应式设计的情况下可能不会使用所有 css 代码？）
如果这是真的，我怎么才能找出真正没有用到的东西。多次尝试各种分辨率和运行覆盖率？
有人遇到同样的问题吗？
覆盖面板是“实时”的，因为您使用页面的次数更多CSS并且将使用 JS。
我的意思是，当您第一次加载页面时，所有 CSS 和 JS 都需要呈现和进行交互，初始视图将突出显示为绿色且需要。如果您随后打开菜单，CSS 将在使用时变为绿色。如果您从未使用覆盖面板 运行 打开菜单，它将不会根据需要计算 CSS。
因此，因为当您 运行 覆盖面板时不需要您的菜单 CSS 代码，并且您删除了菜单的 CSS，您显然会遇到问题。
您有点误用了覆盖面板，它更多的目的是帮助您优化 critical CSS 或查找完全未使用的库。
如果你想用它来识别 CSS 和根本没有使用的 JS 你将不得不调整屏幕大小以适应每个断点（考虑对于不同的屏幕尺寸和您在移动设备、平板电脑等上使用的不同布局），打开每个菜单项、网站所有区域的选项卡、正确和错误地填写所有表格等，以确保涵盖所有状态，并且使用了相关的CSS和JS。
如果您确实设法成功完成了上述操作，那将显示一个页面的覆盖率，但其他页面呢？您将不得不在那里重复该过程以确保您没有删除所需的样式。正如您所想象的那样，如果没有错误，这是不可能成功的！
相反，您应该使用覆盖面板来识别“首屏”内容所需的项目，因为这意味着您可以在初始页面 HTML 和获得低于 1 秒的 First Contentful Paint 等（您需要再次调整屏幕大小以适应不同的断点，但您不需要打开菜单等）
不要用它来尝试识别未使用的东西，除非你绝对确定它们不会被需要（例如，如果错误地包含了一个没有被使用的整个库，你可以安全地删除它。）
我使用 Coverage 来识别登陆页面上未使用的 CSS 和 JavaScript 代码。这极大地帮助减少了加载时间。但是现在我遇到了一个问题，当我在小型设备上查看我的页面时，下拉菜单似乎缺少 css 代码（或 javascript 代码不确定）应该转换成汉堡菜单。
所以我的问题是覆盖率如何计算未使用的代码。它是否只对当前浏览器视图执行此操作（在响应式设计的情况下可能不会使用所有 css 代码？）
如果这是真的，我怎么才能找出真正没有用到的东西。多次尝试各种分辨率和运行覆盖率？
有人遇到同样的问题吗？
覆盖面板是“实时”的，因为您使用页面的次数更多CSS并且将使用 JS。
我的意思是，当您第一次加载页面时，所有 CSS 和 JS 都需要呈现和进行交互，初始视图将突出显示为绿色且需要。如果您随后打开菜单，CSS 将在使用时变为绿色。如果您从未使用覆盖面板 运行 打开菜单，它将不会根据需要计算 CSS。
因此，因为当您 运行 覆盖面板时不需要您的菜单 CSS 代码，并且您删除了菜单的 CSS，您显然会遇到问题。
您有点误用了覆盖面板，它更多的目的是帮助您优化 critical CSS 或查找完全未使用的库。
如果你想用它来识别 CSS 和根本没有使用的 JS 你将不得不调整屏幕大小以适应每个断点（考虑对于不同的屏幕尺寸和您在移动设备、平板电脑等上使用的不同布局），打开每个菜单项、网站所有区域的选项卡、正确和错误地填写所有表格等，以确保涵盖所有状态，并且使用了相关的CSS和JS。
如果您确实设法成功完成了上述操作，那将显示一个页面的覆盖率，但其他页面呢？您将不得不在那里重复该过程以确保您没有删除所需的样式。正如您所想象的那样，如果没有错误，这是不可能成功的！
相反，您应该使用覆盖面板来识别“首屏”内容所需的项目，因为这意味着您可以在初始页面 HTML 和获得低于 1 秒的 First Contentful Paint 等（您需要再次调整屏幕大小以适应不同的断点，但您不需要打开菜单等）
不要用它来尝试识别未使用的东西，除非你绝对确定它们不会被需要（例如，如果错误地包含了一个没有被使用的整个库，你可以安全地删除它。）