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

【问题标题】：Lighthouse dev tools - site with authenticationLighthouse 开发工具 - 具有身份验证的站点
【发布时间】：2020-09-22 17:34:24
【问题描述】：

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

如何让 Lighthouse DevTools 分析我的网站？我可以提供登录凭据吗？

【问题讨论】：

参见官方自述文件中的Testing on a site with authentication。
感谢@wOxxOm，这是个好主意！虽然它只适用于 CLI。我非常愿意测试 CLI - 所以这不是问题！非常感谢！

标签： google-chrome-devtools lighthouse

【解决方案1】：

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

如果使用 chrome 开发工具运行 light house：

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

如果使用 lighthouse cli 工具：

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

所以命令将是：

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

验证它测试了登录页面

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

【讨论】：

有没有办法自动化这个？没有手动登录？
@coderrr22 不使用本地存储数据影响性能报告？有没有其他办法？
@Eli 您必须拥有相关的本地存储数据才能在您所需的页面上运行测试（如果需要身份验证），您能举个例子说明登录延迟的地方吗？如果它很糟糕，也许有一个 test 版本，在应用程序启动时手动硬编码插入本地存储，（使用接受的令牌）然后刷新应该在没有手动登录的情况下工作
@FarimanKashani 为什么会影响绩效报告？

【解决方案2】：

请参阅官方自述文件中的Testing on a site with authentication：

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

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

【讨论】：

感谢 JoostS 的回复！我尝试了该命令，但 lighthouse 会打开一个新窗口（未登录）并且似乎没有使用 --port 参数。（我花了一些时间来升级 lighthouse、node.js 和 nvm 才能运行命令。）
是的，这不起作用。它会在未登录的情况下打开一个新标签。
很抱歉听到这个消息。这是官方的说明。

【解决方案3】：

我必须先安装节点 10.16.3 (node.js > 10.0.0)。

nvm 安装 10.16.3 会显示错误

无法为节点 v10.16.3 下载 npm。

下载你想要的 npm 版本 - https://github.com/npm/cli/releases 我已经下载了 6.9.0 npm 版本 - https://github.com/npm/cli/archive/v6.9.0.zip 应该解压到 C:\Users\xxx\AppData\Roaming\nvm\v10.16.3\node_modules\npm

然后转到 C:\Users\xxx\AppData\Roaming\nvm\v10.16.3\node_modules\npm\bin 并复制两个 npm 文件。第一个（npm .cmd 文件），第二个（npm 文件）然后将这两个文件粘贴到 C:\Users\xxx\AppData\Roaming\nvm\v10.16.3

打开 cmd 并运行命令 node -v 和 npm -v

在灯塔 CLI 按预期工作之后。

该命令仍然不起作用。：/

我听从了 JoostS 的建议 - Testing a site with authentication 该技术不起作用。它会打开一个新的、未登录的窗口，其行为与您在没有 --port 参数的情况下所期望的一样。

【讨论】：