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+JS
或JS
的行,当您按关键字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未显示在谷歌浏览器的覆盖选项卡中的主要内容,如果未能解决你的问题,请参考以下文章
$('iframe').css('visibility','hidden') 在谷歌浏览器中不起作用