logo标签列表

谷歌浏览器覆盖选项卡中没有显示CSS。

cssangulargoogle-chromegoogle-chrome-devtoolscode-coverage
7
我想分析网页上未使用的CSS数量。这个网页是用Angular 7编写的，CSS是在angular.json构建配置中添加的。 看起来这将CSS附加到HTML文件的头部；在开发者工具中，我可以看到几个样式标签。 我已经在许多地方读到，我应该使用Google Chrome开发者工具的覆盖率选项卡来完成此操作。对我来说，这适用于JS，但不适用于CSS。 这里是我所看到的屏幕截图：

enter image description here

这完全是JS。如果我筛选包含CSS的文件，它会返回无结果。

enter image description here

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

enter image description here

如何分析文档头部的代码覆盖率样式？ 我的文档头部如下所示：

enter image description here

enter image description here

p.s. 我正在使用 Chrome 版本 75.0.3770.80（官方构建）（64位）

它能在外部网站上运行吗？ - Niloct
它在stackoverflow上运行正常。 - Joey Gough
在 Brave 浏览器中尝试了一下... 结果相同。 - Joey Gough
 offending page - Joey Gough
我正在使用 Angular 7，并在 angular.json 构建配置中包含来自 node_modules 的 CSS 文件。 - Joey Gough
显示剩余14条评论
1个回答
0

所以你的所有CSS似乎都是内部的（它们没有从文件中提供，而是捆绑在HTML中）。

进行一个小测试：将其中一个<style>标签的CSS内容放入一个.css文件中（例如test.css），并使用<link rel="stylesheet" href="test.css">将这些文件包含在<head>中，看看它们是否起作用，并显示在覆盖范围内。

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

编辑

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

由于您的样式都捆绑在HTML中，它们都会混杂在这一行中！

例如：

CSS+JS in Coverage tab

你的地址将成为应用程序的根URL。

编辑

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

关于动态CSS，你是对的，它确实没有在选项卡中涵盖。上面的链接通过JavaScript放置了一个<style>标签，规则从未显示在覆盖选项卡的任何行中。干得好 :)
我没有看到你所说的CSS+JS行。 - Joey Gough
@JoeyGough URL 过滤器仅在 URL 文本中搜索，因此如果您加载的 URL 上没有文本 css，它就不会被过滤。也许我突出显示的行对您来说只显示了类型为“CSS”，因为您的所有 JS 都是外部文件。 - Niloct
寻找与您首次访问应用程序时在浏览器地址栏中呈现的地址相对应的行。 - Niloct
1
对我来说没问题。那个URL只显示JS，而且相对较小（400字节）。下载的文件并不包含所有的样式标签（这可能是它只被标记为JS的原因）。在初始渲染期间，一些JS必须将样式标签附加到DOM中。 - Joey Gough
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，