Chrome 的无头模式Headless简介

Chrome 的无头模式变得更好用了！

Chrome 的无头模式变得更好用了！本文概要介绍了近期的工程工作，让 Headless 更接近 Chrome 的常规“Headful”模式，让 Headless 对开发者更有用。

背景

早在 2017 年，Chrome 59 便引入了所谓的无头模式，可让您在没有任何可见界面的无人值守环境中运行浏览器。从本质上讲，就是在不使用 Chrome 的情况下运行 Chrome！

无头模式是一种通过 Puppeteer 或 ChromeDriver 等项目实现浏览器自动化的热门选择。以下是使用无头模式创建指定网址的 PDF 文件的极简命令行示例：

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

Headless 有哪些新变化？

在深入了解最新的 Headless 改进之前，我们有必要先了解一下旧版 Headless 的工作原理。我们之前展示的命令行代码段使用了 --headless 命令行标记，这表明无头只是常规 Chrome 浏览器的一种操作模式。但令人惊讶的是，事实并非如此。从技术上讲，旧版 Headless 是一种独立的替代浏览器实现方案，它正好是作为同一 Chrome 二进制文件的一部分一起提供的。但不共享 //chrome 中的任何 Chrome 浏览器代码。

正如您所想象的，实施和维护这个独立的无头浏览器会产生大量的工程开销，但这不是唯一的问题。由于 Headless 是一种单独的实现，因此它有自己的 bug 和功能，而这些 bug 和功能是头部 Chrome 中不存在的。这就造成了一种令人困惑的情况：任何自动化浏览器测试在有头模式下都可能会通过，但在无头模式下却会失败，反之亦然。这是自动化工程师的一大痛点。它还排除了任何依赖于安装浏览器扩展程序的自动化测试，例如测试。这同样适用于任何其他浏览器级功能：除非 Headless 有自己的单独实现，否则不受支持。

2021 年，Chrome 团队着手解决此问题，并一次性统一了无头模式和有头模式。

我们很高兴地宣布，Chrome 112 中现已提供新的无头模式！在此模式下，Chrome 会创建但不显示任何平台窗口。所有其他功能（包括现有和未来的功能）均不受限制。

体验全新的无头模式

如需试用新的无头模式，请传递 --headless=new 命令行标志：

chrome --headless=new

目前，旧版无头模式仍可通过以下方式使用：

chrome --headless=old

目前，如果在没有明确值的情况下传递 --headless 命令行标志，系统仍会激活旧的无头模式，但我们计划随着时间的推移将此默认设置更改为新的无头模式。

我们计划从 Chrome 二进制文件中彻底移除旧版 Headless，并于今年晚些时候停止在 Puppeteer 中支持此模式。在此次移除过程中，我们将把旧版 Headless 作为单独的独立二进制文件提供给无法升级的用户。

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 团队的博文。

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

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

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

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

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

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

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

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

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

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