利用 Chrome 无头模式,您可以在无人值守的环境中运行浏览器, 没有任何可见界面从本质上讲,您可以在没有 Chrome 的情况下运行 Chrome。
无头模式是浏览器自动化的热门选择,可通过 Puppeteer 或 ChromeDriver。
使用无头模式
如需使用无头模式,请传递 --headless
命令行标志:
chrome --headless
使用旧版无头模式
以前,无头模式
为浏览器提供单独的备用浏览器实现
是作为同一 Chrome 二进制文件的一部分提供的。未分享
Chrome 浏览器代码
//chrome
。
Chrome 现在整合了无头模式和头部模式。
目前,旧版无头模式仍可通过以下设备使用:
chrome --headless=old
在 Puppeteer 中
如需在 Puppeteer 中使用无头模式,请执行以下操作:
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
headless: 'true', // (default) enables Headless
// `headless: 'old'` enables old 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'))
.build();
await driver.get('https://developer.chrome.com/');
// …
await driver.quit();
如需了解详情,包括使用其他语言绑定的示例,请参阅 Selenium 团队的博文。
命令行标志
以下命令行标志在无头模式下可用。
--dump-dom
--dump-dom
标志用于将目标网页的序列化 DOM 输出到 stdout。
例如:
chrome --headless --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 --screenshot --window-size=412,892 https://developer.chrome.com/
--print-to-pdf
--print-to-pdf
标志将目标网页保存为名为 output.pdf
的 PDF,
当前工作目录例如:
chrome --headless --print-to-pdf https://developer.chrome.com/
或者,您可以添加 --no-pdf-header-footer
标志以忽略输出
页眉(包含当前日期和时间)和页脚(包含网址和页面)
编号)。
chrome --headless --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 --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 --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 --print-to-pdf --allow-chrome-scheme-url chrome://gpu
调试
因为 Chrome 在无头模式下实际上处于不可见状态,所以听起来可能会有些棘手 解决问题。无头 Chrome 的调试方式 类似于头部 Chrome
在无头模式下启动 Chrome
--remote-debugging-port
命令行标志。
chrome --headless --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 开发者工具远程调试以进行连接 发送到无头目标并对其进行检查。
- 转到
chrome://inspect
,然后点击 Configure...(配置...)按钮。 - 输入 WebSocket 网址的 IP 地址和端口号。
- 在前面的示例中,我输入了
127.0.0.1:60926
。
- 在前面的示例中,我输入了
- 点击完成。您应该会看到远程目标及其所有标签页 列出其他目标
- 点击 inspect 以访问 Chrome 开发者工具并检查遥控器 无头目标,包括网页实时视图。
反馈
我们期待收到您对无头模式的反馈。如果 遇到任何问题,请提交 bug。