是否可以使用Chrome Developer工具审核多个页面？

Question

我正在尝试在我的网站中找到未使用的CSS类，然后我发现Chrome开发人员工具中有一个审核功能，用于标记未使用的CSS类。但是，它一次只能做一页。有没有办法让它审核多个页面，以便我可以找到所有页面都没有使用的CSS类？

我知道有一个Firefox插件Dust-Me可以完成这项工作。我只想找到我是否可以单独使用Chrome，因为我更熟悉Chrome开发者工具。

Answer 1

DevTools只针对当前打开的页面运行，所以我的预感是，不。

您可以安装Lighthouse CLI（它使用相同的后端来查找未使用的CSS作为DevTools），然后通过Bash脚本针对URL列表运行Lighthouse。

urls=("a.com" "b.com" "c.com")
for url in $urls; do
  lighthouse $url
done

Answer 2

最近有一个名为DisCoverage的浏览器扩展程序应该可以做到这一点。阅读说明，因为该扩展程序的1.0版无法自动完成整个操作，您需要为访问的每个页面手动导出文件，最后使用相同的扩展程序合并这些文件。

希望此扩展功能将来会得到改进，能够自动收集覆盖率报告，并允许将多个结果与一个不错的用户界面结合在一起。

（该扩展程序基本上使用开发人员工具的Coverage功能，并将每个页面的coverage结果导出到单个目录中的单独文件中。它还具有将多个coverage报告合并为单个最终报告以查看结果的功能。）< / p>