logo标签列表

Chrome开发者工具：CSS覆盖未使用的字节

google-chrome-devtoolscode-coverage
8
我正在尝试从网页中移除未使用的CSS。
  • 在Chrome开发者工具中，点击垂直三个点 -> 更多工具 -> 覆盖率。
  • 点击任何CSS文件。
  • 我们会看到一个报告，其中红色表示未使用的CSS，绿色表示已使用的CSS。
是否有一种方式可以根据CSS是否使用将其分组？现在，红/绿视觉指示器是好的，但它们没有提供一种简单的方法来复制/粘贴仅使用的CSS。 如何获取CSS代码覆盖率 CSS代码覆盖的可视化指示器
我认为这很难实现，因为你看到的是样式表的实时版本。这意味着重新排列它会修改它，从而可能改变每个规则的覆盖范围。例如，如果您的样式表由body{color:red} body{color: blue}组成，则红色的那个将被报告为未使用，但如果您按未使用的最后一个排序，则蓝色的那个将成为未使用的，并且您的文本将变为红色。但也许有一个我不知道的冻结选项... - Kaiido
（上述评论实际上是一个不好的例子，因为覆盖率无法将被覆盖的规则检测为未使用，但你可以理解我的意思） - Kaiido
这会很不错... - Alexander
1个回答
5

我是一名DevTools技术作家。

很抱歉，目前还没有办法进行分组。我们知道用户希望能够将使用的代码导出到文件中。但是无法确定该功能何时可用。

Kayce - 你能提供一下这段代码/功能请求的票据可能存在的地方吗？我可以试着对它进行PR。 - anurag
嗨@anurag，这是功能请求，这是代码。在开始工作之前，我建议您在功能请求票证中留言，提出首先处理该功能的意愿，因为工程师可能已经开始处理它了。 - Kayce Basques
1
嗨 @KayceBasques - 我的理解是这只适用于单个页面，它不可能像Firefox的Dust Me扩展那样记录整个会话。或者有什么诀窍吗...？谢谢！ - Codemonkey
1
@Codemonkey 你是对的。它只适用于单个页面。 - Kayce Basques
@KayceBasques，请问这个功能现在是否已经可用了？ - AlreadyLost
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接