css 未显示在 google chrome 的覆盖率选项卡中

Question

我想分析我网页上未使用的 CSS 数量。这个网页是用 Angular 7 编写的，css 被添加到 angular.json 构建配置中。

这似乎是将 css 附加到 html 文件的头部；在开发人员工具中，我可以看到几个样式标签。

我在很多地方都读到过，我应该使用 Google Chrome 中开发人员工具的覆盖选项卡来做到这一点。对我来说，这适用于 JS，但不适用于 CSS。

以下是我所看到的截图：

都是JS。如果我过滤包含 css 的文件，它不会返回任何结果

但是我可以看到这里已经下载了 css 文件。

如何分析文档头部的代码覆盖样式？

我的文档的头部是这样的：

ps 我使用的是 Chrome 版本 75.0.3770.80（官方版本）（64 位）

Answer 1

所以你所有的 CSS 看起来都是内部的（它们不是从文件中提供的，而是捆绑在 HTML 中）。

做一个小测试：将其中一个标签的 CSS 内容放入<style>一个文件中.css（例如，test.css），并将这些文件包含在中<head>，<link rel="stylesheet" href="test.css">看看它们是否有效，并显示在覆盖率中。

（并<style>从原件中删除相应的标签）

编辑

如果您不按关键字过滤CSS，您将看到有一行类型为CSS+JS或JS，当您按关键字过滤时，该行不会显示CSS。

由于您的样式都捆绑在 HTML 中，因此它们都会破坏这一行！

例如：

您的地址将是应用程序的根 URL。

编辑

关于动态CSS，你是对的，它只是没有包含在选项卡中。上面的链接<style>通过 JavaScript 放置了一个标签，并且规则永远不会显示在覆盖选项卡的任何行中。好工作：）