原文地址：Getting Started with Headless Chrome By Eric Bidelman Engineer @ Google working on web tooling: Headless Chrome, Puppeteer, Lighthouse Headless Chrome在Chrome59中发布，用于在headless环境中运行Chrome浏览器，也就是在非Chrome环境中运行Chrome。它将Chromium和Blink渲染引擎提供的所有现代Web平台功能引入命令行。 它有什么用处呢？ headless浏览器是自动测试和服务器环境的绝佳工具，您不需要可见的UI shell。例如，针对真实的网页进行测试，创建网页的PDF，或者只是检查浏览器如何呈现URL。 0. 开始 最简单的开始使用headless模式的方法是从命令行打开Chrome。如果你已经安装了Chrome59+的版本，可以使用 --headless 标签： 复制代码 chrome \ --headless \ # 在headless模式运行Chrome --disable-gpu \ # 在Windows上运行时需要--remote-debugging-port=9222 \ https://www.chromestatus.com # 打开URL. 默认为about:blank 复制代码 注意：若在Windows中运行，则需要在命令行添加 --disable-gpu 。 chrome 命令需要指向Chrome的安装路径。（即在Chrome的安装路径下运行） 1. 命令行功能 在某些情况下，您可能不需要以编程方式编写Headless Chrome脚本。下面是一些有用的命令行标志来执行常见任务。 1.1 打印DOM --dump-dom 将 document.body.innerHTML 在stdout打印出来： chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/ 1.2 创建PDF --print-to-pdf ： chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/ 演示：在chrome安装目录下运行 chrome --headless --disable-gpu --print-to-pdf https://www.baidu.com/ 生成PDF文件：C:\Program Files (x86)\Google\Chrome\Application\69.0.3497.81\output.pdf 1.3 截屏 --screenshot 复制代码 chrome --headless --disable-gpu --screenshot https://www.chromestatus.com/ # 标准屏幕大小 chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://www.chromestatus.com/ # Nexus 5x chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.chromestatus.com/ 复制代码 运行 --screenshot将会在当前运行目录下生成一个 screenshot.png 文件。若想给整个页面的截图，那么会比较复杂。来自 David Schnurr 的一篇很棒的博文介绍了这一内容。请查看 使用 headless Chrome 作为自动截屏工具。 1.4 REPL模式（read-eval-print loop） --repl 在REPL模式运行Headless，该模式允许通过命令行在浏览器中评估JS表达式： 复制代码 $ chrome --headless --disable-gpu --repl --crash-dumps-dir=./tmp https://www.chromestatus.com/ [0608/112805.245285:INFO:headless_shell.cc(278)] Type a Javascript expression to evaluate or "quit" to exit. >>> location.href {"result":{"type":"string","value":"https://www.chromestatus.com/features"}} >>> quit $ 复制代码 注意：使用repl模式时需要添加 --crash-dumps-dir 命令。 2. 在没有浏览器界面情况下调试Chrome 当使用 --remote-debugging-port=9222 运行Chrome时，会启用DevTools协议的实例。该协议用于与Chrome通信并且驱动headless浏览器实例。除此之外，它还是一个类似于 Sublime, VS Code, 和Node的工具，可用于远程调试一个应用。 由于没有浏览器UI来查看页面，因此需要在另一个浏览器中导航到http：// localhost：9222以检查一切是否正常。这将看到一个可查看页面的列表，可以在其中单击并查看Headless正在呈现的内容： DevTools远程调试界面 在这里，你可以使用熟悉的DecTools功能来查看、调试、修改页面。若以编程方式（programmatically）使用Headless，该页面的功能更强大，可以用于查看所有的DecTools协议的命令，并与浏览器进行通信。 3. 使用编程模式（Node） 3.1 Puppeteer Puppeteer 由Chrome团队开发的Node库。它提供了控制headless Chrome的高阶API。类似于 Phantom 和 NightmareJS这样的自动测试库，但它只用于最新版本的Chrome。 除此之外，Puppeteer还可用于截屏，创建PDF，页面导航，以及获取有关这些页面的信息。如果需要快速进行浏览器的自动化测试，建议使用该库。它隐藏了DevTools协议的复杂性，并负责启动Chrome的调试实例等冗余任务。 安装： npm i --save puppeteer 例子-打印用户代理信息： 复制代码 const puppeteer = require('puppeteer'); (async() => { const browser = await puppeteer.launch(); console.log(await browser.version()); await browser.close(); })(); 复制代码 例子-截屏 复制代码 const puppeteer = require('puppeteer'); (async() => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://www.chromestatus.com', {waitUntil: 'networkidle2'}); await page.pdf({path: 'page.pdf', format: 'A4'}); await browser.close(); })(); 复制代码 查看 Puppeteer's 文档 学习Puppeteer的更多用法。 3.2 CRI库 相对于Puppeteer's API来说，chrome-remote-interface 是一个低阶的库，推荐使用它更接近底层地直接使用DevTools协议。 打开Chrome chrome-remote-interface不能打开Chrome，因此需要自己打开Chrome。 在CLI部分，我们使用--headless --remote-debugging-port = 9222手动打开Chrome。但是，要实现完全自动化测试，您可能希望从应用程序中生成Chrome。 使用 child——process 的一种方式： 复制代码 const execFile = require('child_process').execFile; function launchHeadlessChrome(url, callback) { // Assuming MacOSx. const CHROME = '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome'; execFile(CHROME, ['--headless', '--disable-gpu', '--remote-debugging-port=9222', url], callback); } launchHeadlessChrome('https://www.chromestatus.com', (err, stdout, stderr) => { ... }); 复制代码 但是如果你想要一个适用于多个平台的可移植解决方案，那么事情会变得棘手。看看Chrome的硬编码路径吧：( 使用ChromeLaucher Lighthouse 是测试web应用质量绝佳工具。用于启动Chrome的强大的模块就是在Lighthouse中开发的，现在可以单独使用。 chrome-launcher NPM module 可以找到Chrome的安装路径，设置调试实例，打开浏览器，并且当程序运行完成时关掉它。最棒的是，由于Node，它可以跨平台工作！ 默认情况下，chrome-launcher会尝试启动Chrome Canary（如果已安装），但可以更改它以手动选择要使用的Chrome。要使用它，首先从npm安装： npm i --save chrome-launcher 例子-使用 chrome-launcher 启动Headless模式 复制代码 const chromeLauncher = require('chrome-launcher'); // 可选: 设置launcher的日志记录级别以查看其输出 // 安装：: npm i --save lighthouse-logger // const log = require('lighthouse-logger'); // log.setLevel('info'); /** * 启动Chrome的调试实例 * @param {boolean=} headless True (default) 启动headless模式的Chrome. * False 启动Chrome的完成版本. * @return {Promise} */ function launchChrome(headless=true) { return chromeLauncher.launch({ // port: 9222, // Uncomment to force a specific port of your choice. chromeFlags: [ '--window-size=412,732', '--disable-gpu', headless ? '--headless' : '' ] }); } launchChrome().then(chrome => { console.log(`Chrome debuggable on port: ${chrome.port}`); ... // chrome.kill(); }); 复制代码 运行此脚本并没有太大作用，但在任务管理器中应该可以看到Chrome实例已启动，内容为 about:blank 。但是没有浏览器界面。因为是headless模式。 要控制浏览器，我们需要DevTools协议！ 检索有关页面的信息 安装： npm i --save chrome-remote-interface 例子-打印用户代理 复制代码 const CDP = require('chrome-remote-interface'); ... launchChrome().then(async chrome => { const version = await CDP.Version({port: chrome.port}); console.log(version['User-Agent']); }); 复制代码 结果类似于： HeadlessChrome/60.0.3082.0 例子-检查网站是否有应用列表 复制代码 const CDP = require('chrome-remote-interface'); ... (async function() { const chrome = await launchChrome(); const protocol = await CDP({port: chrome.port}); // Extract the DevTools protocol domains we need and enable them. // See API docs: https://chromedevtools.github.io/devtools-protocol/ const {Page} = protocol; await Page.enable(); Page.navigate({url: 'https://www.chromestatus.com/'}); // Wait for window.onload before doing stuff. Page.loadEventFired(async () => { const manifest = await Page.getAppManifest(); if (manifest.url) { console.log('Manifest: ' + manifest.url); console.log(manifest.data); } else { console.log('Site has no app manifest'); } protocol.close(); chrome.kill(); // Kill Chrome. }); })(); 复制代码 例子-使用DOM API提取页面的