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

【问题标题】：css not showing in coverage tab of google chromeCSS未显示在谷歌浏览器的覆盖选项卡中
【发布时间】：2019-10-21 21:37:19
【问题描述】：

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

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

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

以下是我看到的截图：

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

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

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

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

附言我正在使用 Chrome 版本 75.0.3770.80（官方版本）（64 位）

【问题讨论】：

【解决方案1】：

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

做一个小测试：将<style> 标记之一的CSS 内容放在.css 文件中（例如，test.css），并将这些文件包含在<head> 和<link rel="stylesheet" href="test.css"> 中，看看是否他们工作，并出现在报道中。

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

编辑

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

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

例如：

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

编辑

您对动态 CSS 的看法是正确的，它只是没有包含在选项卡中。上面的链接通过 javascript 放置了一个 <style> 标记，并且规则永远不会显示在覆盖选项卡的任何行中。干得好:)

【讨论】：

我没有看到你说的这个 CSS+JS 行
@JoeyGough URL 过滤器仅在 URL 文本中搜索，因此如果您加载的 URL 上没有文本 css，它将不会被过滤。也许我突出显示的那行显示类型为 CSS 只为你那里，因为你所有的 JS 都在外部文件上。
查找与您首次访问应用程序时浏览器地址栏中显示的地址对应的行。
对我来说没问题。该网址仅显示 JS，并且相对较小（400 字节）。该文件在下载时不包含所有样式标签（一定是它只标记为 js 的原因）。某些 JS 在初始渲染期间必须在 dom 中附加样式标签。