灯塔开发工具-具有身份验证的站点

Question

我正在尝试使用灯塔DevTools进行审计。我的网站需要认证。当我运行测试时，灯塔将我记录在案，只对/login进行分析。

如何让灯塔DevTools分析我的网站？我能提供登录凭证吗？

Answer 1

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

如果使用chrome工具来运行灯光房:

• 在chrome dev tools中的灯塔选项卡上，只需单击设置图标即可。
• 取消选中“清除存储”复选框。
• 生成报告，在刷新时，它将使用本地存储数据，因此将保持登录。

如果使用灯塔cli工具:

• 按照JoostS 回答中的说明，安装和执行，只需将--disable-storage-reset标志添加到灯塔命令中，您也可以添加--view标志，以便为报表打开一个选项卡。

所以命令是：

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

验证它测试了登录的页面

• 您可以通过查看性能度量下的报表来验证它测试了登录页面--加载了页面的图像，所以如果图像对应于登录页面，我相信它意味着测试是正确的。

Answer 2

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

当通过npm i -g灯塔或纱线全球添加灯塔全球安装时，铬调试将添加到您的路径。这个二进制文件使用一个开放的调试端口启动一个独立的Chrome实例。

• 运行铬-调试。这将记录Chrome实例的调试端口
• 导航到您的站点并登录。
• 在单独的终端选项卡中，使用铬调试中的端口号运行灯塔站点-端口号。

Answer 3

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

nvm安装10.16.3将显示错误

无法下载节点10.16.3的npm。

下载您想要的npm版本-我已经下载了6.9.0npm版本的https://github.com/npm/cli/releases - https://github.com/npm/cli/archive/v6.9.0.zip，应该将其解压缩到https://github.com/npm/cli/releases中

然后转到C:\Users\xxx\AppData\Roaming\nvm\v10.16.3\node_modules\npm\bin并复制两个npm文件。首先(npm .cmd文件)，第二个(npm文件)，然后粘贴C：\Users\xxx\AppData\漫游\nvm\v10.16.3中的两个文件。

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

在那座灯塔之后，CLI照常工作。

不过，该命令仍然不起作用。:/

我遵循了JoostS - 使用身份验证测试站点的建议，这种技术行不通.它打开一个新的，而不是登录窗口，行为就像你所期望的没有-port参数。