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

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

---

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

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

Answer 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并运行命令-v和npm -v

之后，灯塔CLI可以正常工作。

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

我遵循了JoostS的建议-Testing a site with authentication 该技术不起作用。它会打开一个新的未登录窗口，其行为就像没有--port参数时所期望的那样。