摘要：確切位置因平臺(tái)而異。如果以編程方式使用，這個(gè)頁(yè)面也是一個(gè)強(qiáng)大的調(diào)試工具，能看到所有原始的協(xié)議命令通過(guò)連線，於瀏覽器進(jìn)行通信。警告協(xié)議可以做很多有趣的事，但作為入門選項(xiàng)他令人沮喪。目前，提供了比協(xié)議高級(jí)別的。

本文翻譯自：Getting Started with Headless Chrome
原文更新時(shí)間：July 28,2017
作者：Eric Bidelman（Engineer @ Google. Working on Chrome & the web.）
譯者：Pandorym

Headless Chrome由 Chrome 59 帶來(lái)。這是一種在無(wú)界面環(huán)境中運(yùn)行 Chrome 瀏覽器的方法。本質(zhì)上，就是運(yùn)行無(wú)界面的的 Chrome ！他為命令行帶來(lái)了 Chromium 和 Blink 渲染引擎提供的所有現(xiàn)代的 Web 平臺(tái)特性。

他有什麼用呢？

用於對(duì)於自動(dòng)化測(cè)試和不需要能看到UI外殼的服務(wù)器環(huán)境，Headless 瀏覽器是一個(gè)極好的工具。舉個(gè)例子，你可能要對(duì)一個(gè)真實(shí)的 Web 頁(yè)面進(jìn)行一些測(cè)試，為它創(chuàng)建一個(gè) PDF ，或者就是檢查噶瀏覽器如何渲染一個(gè) URL 。

提示：Headless模式在Mac和Linux上是Chrome 59可用。Windows的支持將在Chrome 60到來(lái)。你可以打開(kāi)chrome://version檢查當(dāng)前版本。

開(kāi)啟 Headless（CLI）

啟動(dòng) Headless 模式最簡(jiǎn)單的方式四在命令行中打開(kāi) Chrome 二進(jìn)制文件。如果你已經(jīng)安裝Chrome 59+，攜帶--headless標(biāo)識(shí)啟動(dòng)Chrome：

chrome 
  --headless                    # 使用 headless 模式.
  --disable-gpu                 # 現(xiàn)在暫時(shí)還需要.
  --remote-debugging-port=9222  
  https://www.chromestatus.com   # 將打開(kāi)的 URL. 默認(rèn)打開(kāi) about:blank.

注意：現(xiàn)在，你需要包含--disable-gpu參數(shù)。不過(guò)這個(gè)參數(shù)最終會(huì)被丟棄。

chrome需要指向你安裝的 Chrome。確切位置因平臺(tái)而異。由於我在 Mac 上，我為我安裝的每個(gè)版本的 Chrome 都創(chuàng)建了方便的別名。

如果你在Chrome的穩(wěn)定版頻道不能進(jìn)行這個(gè)測(cè)試，我推薦使用chrome-canary：

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

從 這裡 下載 Chrome Canary。

命令行特性

在某些情況下，你可能不需要以編程方式編寫 Headless Chrome。這是一些對(duì)執(zhí)行普通任務(wù)有用的命令行標(biāo)識(shí)。

打印 DOM

--dump-dom標(biāo)識(shí)，打印document.body.innerHTML到標(biāo)準(zhǔn)輸出：

chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/

創(chuàng)建 PDF

--print-to-pdf標(biāo)識(shí)，為頁(yè)面創(chuàng)建一個(gè)PDF文件：

chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/

取得截屏

要捕獲一個(gè)頁(yè)面的屏幕截圖，使用--screenshot標(biāo)識(shí)：

# Size of a standard letterhead.
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標(biāo)識(shí)運(yùn)行，將在當(dāng)前工作目錄產(chǎn)生一個(gè)命名為screenshot.png的文件。如果你正在尋找完整的頁(yè)面截圖，事情會(huì)更複雜一些。這有一個(gè) Davil Schnurr 發(fā)佈的優(yōu)秀的Blog，包含你需要的大部分內(nèi)容。查看：使用 Headless Chrome 作為自動(dòng)截屏工具。

REPL 模式（read-eval-print loop）

--repl標(biāo)識(shí)使 Headless 運(yùn)行砸地一個(gè)特定的模式。你可以通過(guò)命令行，要求在瀏覽器中執(zhí)行JS表達(dá)式：

$ chrome --headless --disable-gpu --repl 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
$

脫離瀏覽器界面調(diào)試Chrome

當(dāng)你使用--remote-debug-port=9222運(yùn)行 Chrome 時(shí)，他將啟動(dòng)一個(gè)實(shí)例，并激活 DevTools 協(xié)議。這個(gè)協(xié)議用於連接 Chrome ，和驅(qū)動(dòng) Headless 瀏覽器實(shí)例。他也用於使用 Sublime，VS Code 和 Node 等工具遠(yuǎn)程調(diào)試應(yīng)用程序。#協(xié)同

由於你沒(méi)有瀏覽器 UI 查看頁(yè)面，在另一個(gè)瀏覽器進(jìn)入http://localhost:9222以檢查他正在工作。你將在視察頁(yè)面看到一個(gè)列表，在這你可以通過(guò)點(diǎn)擊來(lái)查看 Headless 的渲染。

在這，你可以使用熟悉的 DevTools 特性像通常那樣去檢查、調(diào)試和調(diào)整頁(yè)面。如果以編程方式使用 Headless，這個(gè)頁(yè)面也是一個(gè)強(qiáng)大的調(diào)試工具，能看到所有原始的 DevTools 協(xié)議命令通過(guò)連線，於瀏覽器進(jìn)行通信。

使用編程方式（Node） 啟動(dòng) Chrome

在之前的章節(jié)，我們使用--headless --remote-debugging-port=9222手動(dòng)啟動(dòng)Chrome。然後，為了完全自動(dòng)化測(cè)試，你可能想在你的應(yīng)用程序中生成Chrome。

一個(gè)方法是使用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) => {
  ...
});

但你想要一個(gè)跨多平臺(tái)的解決方案時(shí)，事情就變得棘手了。就看看這硬編碼的 Chrome 路徑吧 :(

使用 ChromeLauncher

Lighthouse 是一個(gè)用於測(cè)試Web應(yīng)用程序質(zhì)量的極好的工具。有一個(gè)用於啟動(dòng) Chrome 的強(qiáng)大的模塊，之前被包含在 Lightouse 內(nèi)部，但現(xiàn)在可以獨(dú)立使用了。chrome-launcher NPM 模塊將尋找 Chrome 的安裝位置、設(shè)置一個(gè)調(diào)試實(shí)例、啟動(dòng)瀏覽器，并在你的應(yīng)用程序完成時(shí)結(jié)束他。最優(yōu)秀的是它跨多平臺(tái)工作，感謝 Node ！

默認(rèn)的，chrome-launcher將啟動(dòng) Chrome Canary （如果安裝了），但你能手動(dòng)更改選擇使用哪一個(gè) Chrome。要使用他，先從 npm 安裝：

yarn add chrome-launcher

Example - 使用chrome-launcher啟動(dòng) Headless

const chromeLauncher = require("chrome-launcher");

// Optional: set logging level of launcher to see its output.
// Install it using: yarn add lighthouse-logger
// const log = require("lighthouse-logger");
// log.setLevel("info");

/**
 * Launches a debugging instance of Chrome.
 * @param {boolean=} headless True (default) launches Chrome in headless mode.
 *     False launches a full version of 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();
});

運(yùn)行這個(gè)腳本并不會(huì)做什麼事，但你應(yīng)該在任務(wù)管理器中看到一個(gè) Chrome 實(shí)例啟動(dòng)，他載入了about:blank。記著，這不會(huì)有任何瀏覽器界面，We"re headless.

要控制瀏覽器，我們需要 DevTools 協(xié)議！

檢索關(guān)於界面的信息

chrome-remote-interface是一個(gè)很好的 Node 包，他提供了 DevTools 協(xié)議可用的 APIs。你可以使用他操作 Headless Chrome，跳轉(zhuǎn)到頁(yè)面，獲取關(guān)於頁(yè)面的相關(guān)信息。

警告：DevTools 協(xié)議可以做很多有趣的事，但作為入門選項(xiàng)他令人沮喪。我建議先花費(fèi)一點(diǎn)時(shí)間瀏覽 DevTools Protocol Viewer，然後移步到chrome-remote-interface的API文檔，看看他是如何包裝原始協(xié)議的。

讓我們安裝這個(gè)庫(kù)：

yarn add chrome-remote-interface

Examples

Example - 打印 user agent

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

Example - 檢查這個(gè)網(wǎng)站是否存在 web app manifest

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.
});

})();

Example - 使用 DOM APIs 取得頁(yè)面的