Chrome 无头模式

Mathias Bynens
Mathias Bynens
Peter Kvitek
Peter Kvitek

2017 年,Chrome 59 推出了无头模式, 可让您在无任何可见界面的无人值守的环境中运行浏览器。 从本质上讲,您可以在不使用 Chrome 的情况下运行 Chrome。

无头模式是浏览器自动化的热门选择,可通过 PuppeteerChromeDriver。 下面是一个使用无头模式创建 PDF 文件的极简命令行示例 指定网址:

chrome --headless --print-to-pdf https://developer.chrome.com/

无头设备的运作方式

在我们介绍无头模式的工作原理之前,请务必先了解 “old”使用无头设备。上述命令行代码段使用 --headless 表明 Headless 只是一种操作模式, 常规 Chrome 浏览器。也许令人惊讶,这个事实并不正确。 事实上,旧版的“Headless” 为浏览器提供单独的备用浏览器实现 是作为同一 Chrome 二进制文件的一部分提供的。不共享 Chrome 浏览器代码 //chrome

实现和维护单独的无头浏览器需要 工程开销。由于 Headless 是一个独立的 但有自己的 bug 和功能,不过这些 bug 和功能在 Chrome。这会给自动化浏览器测试造成混淆,而测试可能通过 但在无头模式下会失败,或者相反。

此外,Headless 排除了依赖于浏览器的所有自动化测试 扩展程序安装。这同样适用于其他任何浏览器级别的功能: 除非 Headless 有自己单独的实现方式,否则是不受支持的。

Chrome 团队现已统一了无头模式和头部模式。

新版 Chrome Headless 不再是独立的浏览器实现,而是与 Chrome 共享代码。

Chrome 112 现已推出新的无头模式。在此模式下,Chrome 会创建 但不会显示任何平台窗口所有其他函数,包括现有函数和 可以不受限制地使用

使用无头模式

如需使用新的无头模式,请传递 --headless=new 命令行标志:

chrome --headless=new

目前,旧版无头模式仍可通过以下设备使用:

chrome --headless=old

在 Puppeteer 中

如需在 Puppeteer 中选择启用新的无头模式,请执行以下操作:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'new',
  // `headless: true` (default) enables old Headless;
  // `headless: 'new'` enables new Headless;
  // `headless: false` enables "headful" mode.
});

const page = await browser.newPage();
await page.goto('https://developer.chrome.com/');

// …

await browser.close();

在 Selenium-WebDriver 中

如需在 Selenium-WebDriver 中使用新的无头模式,请执行以下操作:

const driver = await env
  .builder()
  .setChromeOptions(options.addArguments('--headless=new'))
  .build();

await driver.get('https://developer.chrome.com/');

// …

await driver.quit();

如需了解详情,包括使用其他语言绑定的示例,请参阅 Selenium 团队的博文

命令行标志

新的无头模式提供以下命令行标志。

--dump-dom

--dump-dom 标志用于将目标网页的序列化 DOM 输出到 stdout。 例如:

chrome --headless=new --dump-dom https://developer.chrome.com/

这与输出 HTML 源代码不同,您可以通过 curl。为了向您提供 --dump-dom 的输出,Chrome 首先会解析 HTML 将代码导入 DOM 中,执行任何可能改变 DOM 的 <script>,然后 会将该 DOM 转回序列化的 HTML 字符串。

--screenshot

--screenshot 标志用于截取目标网页的屏幕截图,并将其保存为 当前工作目录中的 screenshot.png。这在以下情况中尤其有用: 与 --window-size 标志搭配使用。

例如:

chrome --headless=new --screenshot --window-size=412,892 https://developer.chrome.com/

--print-to-pdf

--print-to-pdf 标志将目标网页保存为名为 output.pdf 的 PDF, 当前工作目录例如:

chrome --headless=new --print-to-pdf https://developer.chrome.com/

或者,您可以添加 --no-pdf-header-footer 标志以忽略输出 页眉(包含当前日期和时间)和页脚(包含网址和页面) 编号)。

chrome --headless=new --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/

不支持:--no-pdf-header-footer 标志背后的功能以前 与 --print-to-pdf-no-header 标志搭配使用。您可能需要回退到 旧的标志名称(如果使用旧版本)。

--timeout

--timeout 标志定义了最长等待时间(以毫秒为单位),该时间过后 --dump-dom--screenshot--print-to-pdf

chrome --headless=new --print-to-pdf --timeout=5000 https://developer.chrome.com/

--timeout=5000 标志会告知 Chrome 等待最多 5 秒再进行打印 PDF。因此,此过程最多需要 5 秒钟即可运行。

--virtual-time-budget

--virtual-time-budget充当“快进”任何具有时效性的代码 (例如 setTimeout/setInterval)。它会强制浏览器执行任何 尽可能快地检查网页代码,同时让网页相信 真的需要这么长时间

我们以下面的演示为例, 每秒更新、记录和显示计数器 使用 setTimeout(fn, 1000)。以下是相关代码:

<output>0</output>
<script>
  const element = document.querySelector('output');
  let counter = 0;
  setInterval(() => {
    counter++;
    console.log(counter);
    element.textContent = counter;
  }, 1_000);
</script>

1 秒后,页面将显示“1”;“2”,依此类推 下面展示了如何在 42 秒后捕获页面状态并将其保存为 PDF 文件:

chrome --headless=new --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time

--allow-chrome-scheme-url

要访问 chrome:// 网址,必须使用 --allow-chrome-scheme-url 标志。 Chrome 123 及更高版本提供此标志。示例如下:

chrome --headless=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu

调试

因为 Chrome 在无头模式下实际上处于不可见状态,所以听起来可能会有些棘手 解决问题。无头 Chrome 的调试方式 类似于头部 Chrome

在无头模式下启动 Chrome --remote-debugging-port 命令行标志。

chrome --headless=new --remote-debugging-port=0 https://developer.chrome.com/

这会将唯一的 WebSocket 网址输出到 stdout,例如:

DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9

在有头 Chrome 实例中,我们可以使用 Chrome 开发者工具远程调试以进行连接 发送到无头目标并对其进行检查。

  1. 转到 chrome://inspect,然后点击 Configure...(配置...)按钮。
  2. 输入 WebSocket 网址的 IP 地址和端口号。
    • 在前面的示例中,我输入了 127.0.0.1:60926
  3. 点击完成。您应该会看到远程目标及其所有标签页 列出其他目标
  4. 点击 Inspect 以访问 Chrome 开发者工具并检查遥控器 无头目标,包括网页的实时视图。

Chrome 开发者工具可以检查远程无头目标网页

反馈

我们期待收到您对新的无头模式的反馈。如果 遇到任何问题,请提交 bug