无头 chrome 启动器 --window-size 导致错误答案

【问题标题】：Headless chrome launcher --window-size causing error无头 chrome 启动器 --window-size 导致错误
【发布时间】：2021-01-15 00:48:27
【问题描述】：

在给定特定窗口大小的情况下，我需要能够截取屏幕截图。我在How to run Headless Chrome in Codeception 上阅读了这篇博文，在Getting Started with Headless Chrome 上阅读了此页面，但无法弄清楚如何在初始化时调整窗口大小。

我已尝试在以下所有选项中传递--window-size，但均无效：

--window-size=1280,1696
--window-size=1280x1696
--window-size 1280,1696
--window-size 1280x1696

最糟糕的，现在我的屏幕截图在这样做一段时间后是空白的。无头浏览器中是否保留了某种内存导致这种情况？我还没有尝试重新启动我的 Mac，这可能是下一个。

那么在给定窗口大小的情况下，有什么方法可以截取整页截图呢？在 phantom.js 中，这是一件非常微不足道的事情。

我的代码在下面

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
const file = require('fs');

(async function() {
  async function launchChrome() {
    return await chromeLauncher.launch({
      chromeFlags: [
        '--window-size=1280,1696',
        '--disable-gpu',
        '--headless'
      ]
    });
  }
  const chrome = await launchChrome();
  const protocol = await CDP({
    port: chrome.port
  });

  const {
    DOM,
    Network,
    Page,
    Emulation,
    Runtime
  } = protocol;
  await Promise.all([Network.enable(), Page.enable(), Runtime.enable(), DOM.enable()]);

  Page.navigate({
    url: 'https://www.yahoo.com/'
  });

  Page.loadEventFired(async() => {

    console.log('Start Page.loadEventFired');
    const script1 = "document.querySelector('p').textContent"
    const result = await Runtime.evaluate({
      expression: script1
    });
    console.log(result.result.value);

    const ss = await Page.captureScreenshot({format: 'png', fromSurface: false});
    file.writeFile('output.png', ss.data, 'base64', function(err) {
      if (err) {
        console.log(err);
      }
    });

    protocol.close();
    chrome.kill(); 
  });

})();

如果我在命令行中执行此操作，它可以正常工作：

alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"

chrome-canary --headless --disable-gpu --screenshot --window-size=300,1696 https://www.yahoo.com/

更新

我意识到无头 Chrome Canary 至少在 Mac 上非常不稳定。如果我关闭终端并重新启动它，有时它会起作用。但是在运行完全相同的脚本之后，它就永远挂断了（我一夜之间离开了）。我今天刚刚更新了所有内容（Chrome Canary、chrome-launcher、chrome-remote-interface）并继续调试。也许现在还不是黄金时间。

【问题讨论】：

我遇到了 'deviceScaleFactor': 0 的停止问题，将其设置为 1 已解决。

标签： javascript node.js google-chrome google-chrome-devtools google-chrome-headless

【解决方案1】：

好的，我刚刚了解到使用 --window-size 不起作用。以下作品：

添加：

  Page.setDeviceMetricsOverride({
    'width': 735,
    'height': 2200,
    'deviceScaleFactor': 1,
    'mobile': false
  });

已移除（导致 Headless Chrome 冻结）：

const script1 = "document.querySelector('p').textContent"
const result = await Runtime.evaluate({
  expression: script1
});
console.log(result.result.value);

【讨论】：