css 未显示在 google chrome 的覆盖范围选项卡中
css not showing in coverage tab of google chrome
我想分析我网页上未使用的数量 CSS。此网页是在 Angular 7 中编写的，css 正在 angular.json 构建配置中添加。
这似乎是将 css 附加到 html 文件的头部；在开发人员工具中，我可以看到几个样式标签。
我在很多地方都读到过，我应该使用 Google Chrome 中开发人员工具的覆盖选项卡来执行此操作。对我来说，这适用于 JS 但不适用于 CSS.
以下是我所看到的屏幕截图：
全是JS。如果我过滤包含 css 的文件 returns 没有结果
但是我可以看到这里已经下载了css个文件。
如何分析文档头部的代码覆盖样式？
我的文档头部是这样的：
p.s。我正在使用 Chrome 版本 75.0.3770.80（官方构建）（64 位）
所以你所有的 CSS 似乎都是内部的（它们不是从文件中提供的，而是捆绑在 HTML 中）。
做一个小测试：将 <style> 标签之一的 CSS 内容放入 .css 文件（例如，test.css）并包含这些文件在 <head> 和 <link rel="stylesheet" href="test.css"> 中，看看它们是否有效，并出现在报道中。
（并从原来的 <style> 标签中删除相应的标签）
编辑
如果您不按关键字 CSS 过滤，您将看到只有一行类型为 CSS+JS 或 JS，当您过滤时不会显示按关键字 CSS.
由于您的所有样式都捆绑在 HTML 中，因此它们都会破坏这一行！
例如：
您的地址将是应用程序的根 URL。
编辑
https://codepen.io/nilo-c-sar-teixeira/full/KLjbZW
您关于动态 CSS 的看法是正确的，只是标签中没有涵盖它。上面的 link 通过 javascript 放置了一个 <style> 标签，并且规则永远不会显示在覆盖选项卡的任何行中。干得好:)
我想分析我网页上未使用的数量 CSS。此网页是在 Angular 7 中编写的，css 正在 angular.json 构建配置中添加。
这似乎是将 css 附加到 html 文件的头部；在开发人员工具中，我可以看到几个样式标签。
我在很多地方都读到过，我应该使用 Google Chrome 中开发人员工具的覆盖选项卡来执行此操作。对我来说，这适用于 JS 但不适用于 CSS.
以下是我所看到的屏幕截图：
全是JS。如果我过滤包含 css 的文件 returns 没有结果
但是我可以看到这里已经下载了css个文件。
如何分析文档头部的代码覆盖样式？
我的文档头部是这样的：
p.s。我正在使用 Chrome 版本 75.0.3770.80（官方构建）（64 位）
所以你所有的 CSS 似乎都是内部的（它们不是从文件中提供的，而是捆绑在 HTML 中）。
做一个小测试：将 <style> 标签之一的 CSS 内容放入 .css 文件（例如，test.css）并包含这些文件在 <head> 和 <link rel="stylesheet" href="test.css"> 中，看看它们是否有效，并出现在报道中。
（并从原来的 <style> 标签中删除相应的标签）
编辑
如果您不按关键字 CSS 过滤，您将看到只有一行类型为 CSS+JS 或 JS，当您过滤时不会显示按关键字 CSS.
由于您的所有样式都捆绑在 HTML 中，因此它们都会破坏这一行！
例如：
您的地址将是应用程序的根 URL。
编辑
https://codepen.io/nilo-c-sar-teixeira/full/KLjbZW
您关于动态 CSS 的看法是正确的，只是标签中没有涵盖它。上面的 link 通过 javascript 放置了一个 <style> 标签，并且规则永远不会显示在覆盖选项卡的任何行中。干得好:)