Chrome ヘッドレス モード

Mathias Bynens
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();

他の言語バインディングを使用した例など、詳細については、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 フラグを追加して出力を省略できます。 ヘッダー（現在の日時を含む）とフッター（URL とページを含む） あります。

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 秒待機します できます。したがって、このプロセスの実行には最大 5 秒かかります。

--virtual-time-budget

--virtual-time-budget は「早送り」として動作する時間に依存するコードを （例: setTimeout/setInterval）。ブラウザは強制的に リンクがクリックされたと仮定して 時間が経つほどです

その用途を説明するために、このデモを考えてみます。 1 秒ごとにカウンタをインクリメント、ロギング、表示する 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:// URL にアクセスするには、--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 URL が stdout に出力されます。次に例を示します。

DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9

ヘッドフル Chrome インスタンスでは Chrome DevTools のリモート デバッグを使用して接続する ヘッドレス ターゲットに送って調べます。

  1. [chrome://inspect] に移動し、[Configure...] ボタンをクリックします。
  2. WebSocket URL の IP アドレスとポート番号を入力します。
    • 前の例では、「127.0.0.1:60926」と入力しました。
  3. [完了] をクリックします。Remote Target が表示され、そのすべてのタブと ターゲットにできます
  4. [inspect] をクリックして Chrome DevTools にアクセスし、リモート ページのライブビューを含むヘッドレス ターゲット。

Chrome DevTools でリモートのヘッドレス ターゲット ページを検査可能

フィードバック

ヘッドレス モードについてのフィードバックをお待ちしています。条件 問題が発生した場合は、バグを報告してください。