如何在2017年获取Chrome的老式审核面板？（如何使用Chrome的审核工具删除未使用的CSS？）

Question

13

我正在尝试按照这篇2014年编写的教程：https://www.labnol.org/internet/remove-unused-css/28635/来操作。它说在运行开发者工具中的“审核”之后，应该会出现一个“删除未使用 CSS 规则”的部分。

我目前正在Windows上使用Chrome 60.0.3112.90，却没有看到这样的部分。甚至在规格说明中也没有提到。它被“减少渲染阻塞样式表”取代了吗？如果是，它们有什么相同之处？

- Emilio

1

你找到解决办法了吗？我也注意到在Chrome中不再有以前的选项了。 - Web Guy

@WebGuy 是的！看答案！ - Emilio

哇，我搜索了很久，但从来没有找到任何人提到过这个。它像魔法一样奏效了！ - Web Guy

2个回答

13

自从 Chrome 更新后，你现在需要使用 CSS 和 JS 代码覆盖率。使用新的覆盖率选项卡查找未使用的 CSS 和 JS 代码。当您加载或运行页面时，该选项卡会告诉您使用了多少代码，相比于加载了多少代码。通过仅发送所需的代码，您可以减小页面的大小。

覆盖率选项卡图1. 覆盖率选项卡点击 URL 将在源面板中显示该文件，并列出哪些代码行被执行。

源面板中有一个代码覆盖率分析功能。每行代码都有一种颜色编码：

绿色表示该行代码已执行。红色表示该行代码没有执行。同时为红色和绿色的代码行表示只有部分代码被执行。例如，类似 var b = (a>0)？a：0 的三元表达式标记为红色和绿色。注意：颜色编码可能会在未来的 Chrome 发布版本中更改。要打开覆盖率选项卡：

打开命令菜单。 (cmd + shift + p)

开始输入“Coverage”，然后选择“显示覆盖率”。

- Kendra Danielle Walker

1

谢谢，看起来不错。但是有没有一种方法可以一键删除所有标记为红色的行？这样我就只剩下使用过的代码了。 - Oliver Schmid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Emilio · Accepted Answer

15

获取旧的审计面板：

- Emilio

3

如果您尝试这样做，但打开的是打印菜单，请先按F12打开开发者工具，然后运行上面列出的命令。 - Web Guy

在此之后，您如何删除那些未使用的CSS？或者我们只能复制已使用的CSS吗？ - Jikku Jose

@JikkuJose 你尝试过我在问题中提供的教程吗？ - Emilio

1

是的，我做过。但那只会显示未使用的CSS。我希望有一种方法可以选择/保存所需的CSS？ - Jikku Jose

1

截至2019年3月，此方法不再可行。请查看下面Kendra的答案，以获取可行的解决方案。 - Bill