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

Posted 2023-03-06

【中文标题】是否可以使用 Chrome 开发者工具审核多个页面？

【英文标题】：Is it possible to audit multiple pages with Chrome Developer tools?

【发布时间】：2017-07-29 21:01:25

【问题描述】：

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

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

【参考方案1】：

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

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

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

【讨论】：

有没有办法合并生成的结果？正如问题中所说，它是用于找出并非在所有页面中使用的 CSS 类。

【参考方案2】：

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

希望这个扩展在未来能够得到改进，能够自动收集覆盖率报告，并允许将多个结果与漂亮的 UI 结合起来。

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

【参考方案3】：

DisCoverage 是一个很棒的工具，但请注意，如果您更改文件名，它将找不到 json 文件，卡在这 30 分钟。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。