Lighthouse 开发工具 - 带有身份验证的站点

Question

我正在尝试使用 Lighthouse DevTools 执行审计。我的网站需要身份验证。当我运行测试时，灯塔将我注销，只分析 /login。

如何使用 Lighthouse DevTools 来分析我的站点？我可以提供登录凭据吗？

Answer 1

如果您使用本地存储以在刷新后保留经过身份验证的状态（例如存储用户的令牌，并在刷新时使用该令牌以便像许多 SPA 一样登录），我找到了一个可能有效的解决方案： https:/ /github.com/GoogleChrome/lighthouse/issues/1418#issuecomment-397753583

如果使用 chrome 开发工具运行灯塔：

• 在 chrome 开发工具的灯塔选项卡上，只需单击设置图标
• 取消选中清除存储复选框。
• 生成报告，并在刷新时使用本地存储数据，因此将使您保持登录状态。

如果使用灯塔 cli 工具：

• 按照 JoostS answer 中的说明安装和执行，只需将--disable-storage-reset标志添加到灯塔命令中，您还可以添加--view标志以打开报告的选项卡。

所以命令将是：

lighthouse <url> --port <port_chrome_debugger_opened> --disable-storage-reset --view

验证它测试了登录页面

• 您可以通过查看性能指标下的报告来验证它是否测试了登录页面，那里有加载的页面图像，所以如果图像对应于登录页面，我相信这意味着它已被正确测试。

Answer 2

请参阅官方自述文件中的在具有身份验证的站点上进行测试：

当通过 npm i -g lighthouse 或 yarn global add lighthouse 全局安装时，chrome-debug 将添加到您的 PATH 中。该二进制文件启动一个带有开放调试端口的独立 Chrome 实例。

• 运行 chrome 调试。这将记录您的 Chrome 实例的调试端口
• 导航到您的网站并登录。
• 在单独的终端选项卡中，使用 chrome-debug 中的端口号运行 lighthouse [siteurl] --port port-number。