使用Chrome开发者工具，是否可以审核多个页面？

Question

我试图找出网站中未使用的CSS类，然后我发现Chrome开发者工具中有一个审核功能可以标记未使用的CSS类。但是，它只能一次审核一个页面。是否有办法使其审核多个页面，以便我可以找到所有页面中未使用的CSS类？

我知道有一个Firefox插件Dust-Me可以完成此任务。我只是想知道是否可以仅使用Chrome开发者工具完成此任务，因为我更熟悉Chrome开发者工具。

- cytsunny

Answer 1

DevTools只能运行在当前打开的页面上，因此我的猜测是不能。

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

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

- Kayce Basques

---

有没有办法将生成的结果合并？如问题所述，这是为了查找在所有页面中都没有使用的CSS类。 - cytsunny

Answer 2

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

希望这个扩展程序将来能够改进，能够自动收集覆盖率报告，并允许使用漂亮的用户界面组合多个结果。

（该扩展程序基本上使用开发人员工具的覆盖功能，并将每个页面的覆盖结果导出到单个目录中的单独文件中。它还包含一个特性，可以将多个覆盖报告合并成一个最终报告，以查看结果。）

- Mikko Rantalainen

---

很遗憾，看起来Google最近删除了这个扩展。 - BBaysinger

我希望Google Chrome本身支持此功能，因为由于安全限制，扩展无法很好地跟踪此类信息。 Google不支持此扩展表明他们根本不喜欢扩展尝试首先执行此操作的想法。 - Mikko Rantalainen

Answer 3

很遗憾 Chrome 的覆盖率选项卡不支持跨页面追踪。不过，看起来我们可以下载报告：

正在下载一份报告，看起来是一个JSON文件。也许我们可以针对我们想要审计的每个页面运行它，下载每个报告，然后通过一些脚本将它们合并在一起。

- dkniffin

Answer 4

DisCoverage是一个很棒的工具，但请注意，如果您更改了文件名，它将无法找到json文件，我曾因此卡在那里30分钟。

- Romain Le Mercier

---

你的回答可以通过添加额外支持信息来改进。请[编辑]以添加更多细节，例如引用或文档，以便其他用户可以确认您的答案是否正确。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community