更改(Chrome)灯塔报告的最终屏幕截图分辨率

Question

我正在使用灯塔为我们自己的网站创建性能报告。我也需要采取一个屏幕截图，看看如何在桌面电脑上的网站。

似乎灯塔在默认情况下采取了一个屏幕截图移动分辨率。

我怎么才能改变呢？

如果可能的话，我会尽量避免使用其他库，如Puppeteer。

这里有一些运行灯塔的代码

import lighthouse from 'lighthouse';
import chromeLauncher from 'chrome-launcher';

const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
const options = {
    logLevel: 'info',
    output: 'json',
    onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
    port: chrome.port
};
const runnerResult  = await lighthouse(url, options);

灯塔返回从审核中捕获的显示：

• screenshot-thumbnails -120 px213px
• final-screenshot -280 x 498

我能要更大的吗？

Answer 1

简介

您需要使用文档中列出的lighthouse CLI options -例如，请参阅github自述文件和节点-npm文档。

有许多选择，但最有趣的选择是：

--screenEmulation 注意:请参见--preset选项，或使用--screenEmulation.disabled禁用。 否则，您可以单独设置这4个参数： -屏幕仿真.移动--屏幕仿真.宽度=360-屏幕仿真.高度=640-屏幕仿真.screenEmulation.mobile=2

另外，请查看设备仿真/ emulatedUserAgents，并特别使用如下所示的params：

lighthouse <url> --chrome-flags="--window-size=1024,768"    
lighthouse <url> --screenEmulation.desktop--screenEmulation.width=1024 --screenEmulation.height=768 --screenEmulation.deviceScaleFactor=2     
lighthouse <url> --screenEmulation.mobile --screenEmulation.width=1024 --screenEmulation.height=768 --screenEmulation.deviceScaleFactor=2  

和

lighthouse <url> --preset=desktop   

还可以查看位于：https://github.com/GoogleChrome/lighthouse/tree/master/lighthouse-core/config上的一些额外的信息

通过Nodejs

在通过nodejs启动时，我需要找到我已有的示例，但我确实从灯塔文档中找到了这个示例。为了从nodejs运行灯塔+铬无头灯，请使用以下方法：

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

function launchChromeAndRunLighthouse(url, flags = {}, config = null) {
  return chromeLauncher.launch(flags).then(chrome => {
    flags.port = chrome.port;
    return lighthouse(url, flags, config).then(results =>
      chrome.kill().then(() => results));
  });
}

const flags = {
  chromeFlags: ['--headless']
};

launchChromeAndRunLighthouse('https://github.com', flags).then(results => {
  // Use results!
});

PS:将很快更新更多信息，

资料来源：

• https://github.com/GoogleChrome/lighthouse
• 节点-npm文档。
• https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/config/lr-desktop-config.js

Answer 2

使用full-page-screenshot审计

值得一提的是，在灯塔版本7.5 (不知道它是如何在以前的版本)，完整的屏幕截图是在审计命名为full-page-screenshot。

考虑到这是一个‘全页’截图，所以它的整个网站自上而下(不仅可见以上的折叠内容)。

除此之外，@menelaos的答案描述了所有有关操作窗口大小和设备仿真的内容，您需要获得任意大小的屏幕截图。