为什么 Chrome 在我的本地开发环境的 Coverage 选项卡中看不到我的 CSS 文件？答案

【问题标题】：Why doesn't Chrome see my CSS files in it's Coverage tab on my local development environment?为什么 Chrome 在我的本地开发环境的 Coverage 选项卡中看不到我的 CSS 文件？
【发布时间】：2017-11-30 13:26:25
【问题描述】：

我有一个流浪环境，我在其中做一些 Drupal 7 开发，我想删除一些未使用的 CSS。所以，我点击了录制按钮并开始加载页面。 JavaScript 文件被很好地拾取。一些外部 CSS 文件也是如此。但是，它找不到任何 CSS。

我认为这可能是因为 Drupal 7 在其 CSS 和 JS 文件末尾添加查询字符串的做法，所以我阻止了 Drupal 这样做。但是，它仍然没有找到 CSS 文件。任何想法为什么它不会？

【问题讨论】：

清除缓存，检查聚合配置
不好 :( 无论如何，我的开发站点上的缓存已关闭。聚合也已关闭。我确实将我的 css 从 scss 编译成一个大 css 文件，然后打开源映射器以在 dev 上调试，这可能与它有关吗？？？？
在其他浏览器中试试怎么样？
还有哪些浏览器测试覆盖率？
我不知道 Drupal 是如何工作的，但是您是否选中了复选框以在覆盖选项卡中包含内容脚本？

标签： css drupal drupal-7 google-chrome-devtools

【解决方案1】：

Drupal 7 使用@import 规则来包含 css 文件。这是旧 IE 浏览器的解决方法，它不允许包含超过 31 个链接样式表。 Google Chrome Coverage 工具似乎无法与 @import-ed 样式表一起正常工作。

但是有一个 Drupal 模块 Link CSS。它允许使用<link> 标签而不是@import 来包含css。因此，如果您安装并启用它，Coverage 工具将在您的 Drupal 7 站点上按预期工作。

【讨论】：