如何在2017年获得Chrome的老式审核小组？(如何使用Chrome的审核工具删除未使用的CSS？)

Question

我正在尝试按照2014年编写的教程:https://www.labnol.org/internet/remove-unused-css/28635/.

它说Remove unused CSS rules在devtools中运行"审计"之后应该会出现一个部分.

我目前在Windows上使用Chrome 60.0.3112.90并且没有这样的部分.它甚至没有在规格中.被它取代了Reduce render-blocking stylesheets吗？如果是的话,它是如何相同的？

Answer 1

要获得旧审计小组:

1. 首先按f12或Ctrl + Shift + I打开开发人员工具
2. 打开命令菜单(Cmd + Shift + P(或Ctrl + Shift + P)).
3. 开始输入"Legacy".
4. 选择"显示旧版审核".

Answer 2

由于chrome已更新,您现在需要使用CSS和JS代码覆盖.使用新的Coverage选项卡查找未使用的CSS和JS代码.当您加载或运行页面时,该选项卡会告诉您使用了多少代码,以及加载了多少代码.您只需提供所需的代码即可缩小页面大小.

Coverage选项卡 图1. Coverage选项卡单击URL可在Sources面板中显示该文件,其中包含已执行的代码行的细分.

"来源"面板中的代码覆盖率已细分.每行代码都用颜色编码:

绿色常亮表示执行的代码行.稳定的红色表示它没有执行.一行红色和绿色的代码表示只执行该行上的某些代码.例如,像var b =(a> 0)的三元表达式？a:0为红色和绿色.注意:在将来的Chrome版本中,颜色编码可能会发生变化.要打开Coverage选项卡:

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

开始键入Coverage并选择Show Coverage.