Chrome 無頭模式

Mathias Bynens
Mathias Bynens
Peter Kvitek
Peter Kvitek

有了 Chrome 無頭模式,就能在無人看管的環境中執行瀏覽器 不會顯示任何使用者介面也就是說,即使不安裝 Chrome,也能執行 Chrome。

無頭模式是瀏覽器自動化作業的熱門選擇,我們透過多項專案 (例如 PuppeteerChromeDriver

使用無頭模式

如要使用無頭模式,請傳遞 --headless 指令列標記:

chrome --headless

使用舊的無頭模式

原本無頭模式 另外在替代瀏覽器上 卻透過同一個 Chrome 二進位檔順利出貨未分享 存取任何 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();

如需詳細資訊,包括使用其他語言繫結的範例,請參閱參議院團隊的網誌文章

指令列旗標

以下指令列旗標適用於無頭模式。

--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」「2」等 如果要在 42 秒後擷取網頁狀態並儲存為 PDF 檔,方法如下:

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

--allow-chrome-scheme-url

必須具備 --allow-chrome-scheme-url 旗標才能存取 chrome:// 網址。 這個旗標自 Chrome 123 版起開放使用。範例如下:

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

偵錯

在無頭模式下,Chrome 會確實隱藏,因此可能聽起來有點棘手 來解決問題要為 Headless 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 開發人員工具遠端偵錯進行連線 複製到無頭目標並進行檢查

  1. 前往 chrome://inspect,然後點選「Configure...」按鈕。
  2. 輸入 WebSocket 網址中的 IP 位址和通訊埠號碼。
    • 在上一個範例中,我輸入了 127.0.0.1:60926
  3. 按一下 [完成]。您應該會看到遠端目標與所有標籤一起顯示 其他目標。
  4. 按一下「檢查」inspect,即可存取 Chrome 開發人員工具並檢查遙控器 無頭目標,包括網頁的即時檢視畫面。

Chrome 開發人員工具可以檢查遠端無頭目標頁面

意見回饋

我們希望能聽聽您對無頭模式的寶貴意見。如果 遇到任何問題時,請回報錯誤