css - CSS未显示在谷歌浏览器的覆盖选项卡中

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

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

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

以下是我所看到的截图：

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

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

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

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

ps 我使用的是 Chrome 版本 75.0.3770.80 (Official Build) (64-bit)

标签： cssangulargoogle-chromegoogle-chrome-devtoolscode-coverage

因此，您的所有 CSS 似乎都是内部的（它们不是从文件中提供的，而是捆绑在 HTML 中）。

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

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

编辑

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

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

例如：

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

编辑

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