Chrome 無頭模式

Mathias Bynens
Mathias Bynens
X GitHub 首頁
Peter Kvitek
Peter Kvitek

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

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

使用無頭模式

如要使用無頭模式，請傳遞 --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 開發人員工具可以檢查遠端無頭目標頁面

意見回饋

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