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

Posted

技术标签:

【中文标题】CSS未显示在谷歌浏览器的覆盖选项卡中【英文标题】:css not showing in coverage tab of google chrome 【发布时间】: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 位)

【问题讨论】:

可以分享网址吗?我刚刚更新了 Chrome,它在这里工作。在brave.com 也成功尝试过,你可以试一试,它是 Chrome 的“衍生”浏览器。 我正在使用本地开发环境(Windows 上的 IIS)。如果我向您发送与我正在访问的相同的网址,它将无法正常工作。 它可以在外部网站上使用吗? 它适用于*** 我在 angular.json 中包含 css 文件 【参考方案1】:

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

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

(并从原始标签中删除相应的<style>标签)

编辑

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

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

例如:

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

编辑

https://codepen.io/nilo-c-sar-teixeira/full/KLjbZW

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

【讨论】:

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

以上是关于CSS未显示在谷歌浏览器的覆盖选项卡中的主要内容,如果未能解决你的问题,请参考以下文章

在谷歌浏览器开发人员中重播 HTTP POST

iframe在谷歌浏览器中与在ie、火狐中显示不一致问题!

如何在谷歌浏览器中调试失败的ajax请求?

$('iframe').css('visibility','hidden') 在谷歌浏览器中不起作用

谷歌浏览器中的 React Native 调试不起作用(文件未显示在调试器中)

谷歌浏览器不显示css样式[关闭]