このページは Cloud Translation API によって翻訳されました。

Chrome ヘッドレスモード

Mathias Bynens

Peter Kvitek

2017 年、Chrome 59 でヘッドレスモードが導入されました。を使用すると、UI を一切表示せずに、無人環境でブラウザを実行できます。基本的に、Chrome は Chrome なしで実行できます。

ヘッドレスモードは、ブラウザの自動化でよく利用されており、 Puppeteer または ChromeDriver。ヘッドレスモードを使用して PDF ファイルを作成するシンプルなコマンドライン例を次に示します。できます。

chrome --headless --print-to-pdf https://developer.chrome.com/

ヘッドレスの仕組み

ヘッドレスの仕組みを説明する前に「old」ヘッドレス対応。上記のコマンドラインスニペットでは、--headless を使用しています。これは、ヘッドレスが単なる動作モードであることを示唆しています。通常の Chrome ブラウザで行います。意外かもしれませんが、これは事実ではありません。実際、以前のヘッドレスは代替ブラウザの実装方法同じ Chrome バイナリに同梱されていたものです共有しないウェブアプリケーション内の Chrome ブラウザのコードを //chrome。

個別のヘッドレスブラウザを実装して維持すると、オーバーヘッドを軽減できます。また Headless は独自のバグや機能があり Chrome。これにより、自動ブラウザテストで混乱が生じ、ヘッドレスモードでは失敗します。また、ヘッドレスモードでは失敗します。

さらに、Headless は、ブラウザに依存する自動テストをすべて除外しました。インストールできます。ブラウザレベルの他の関数についても同じことが言えます。ヘッドレスが独自の個別の実装を持っていない限りサポートされていませんでした

Chrome チームはヘッドレスモードとヘッドフルモードを統合しました。

新しい Chrome ヘッドレスは独立したブラウザ実装ではなく、Chrome とコードを共有するようになりました。

新しいヘッドレスモードは Chrome 112 から利用できます。このモードでは表示されません。その他すべての関数については、制限なく利用できます

ヘッドレスモードを使用する

新しいヘッドレスモードを使用するには、--headless=new コマンドラインフラグを渡します。

chrome --headless=new

現在のところ、以前のヘッドレスモードは以下のデバイスで引き続きご利用いただけます。

chrome --headless=old

Puppeteer 内

Puppeteer で新しいヘッドレスモードを有効にするには:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'new',
  // `headless: true` (default) enables old Headless;
  // `headless: 'new'` enables new 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=new'))
  .build();

await driver.get('https://developer.chrome.com/');

// …

await driver.quit();

他の言語バインディングを使用する例など、詳細については、Selenium チームのブログ投稿をご覧ください。

コマンドラインフラグ

新しいヘッドレスモードでは、次のコマンドラインフラグを使用できます。

`--dump-dom`

--dump-dom フラグは、ターゲットページのシリアル化された DOM を stdout に出力します。例:

chrome --headless=new --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=new --screenshot --window-size=412,892 https://developer.chrome.com/

`--print-to-pdf`

--print-to-pdf フラグを指定すると、ターゲットページが output.pdf という名前の PDF として現在の作業ディレクトリに移動します。例:

chrome --headless=new --print-to-pdf https://developer.chrome.com/

必要に応じて、--no-pdf-header-footer フラグを追加して出力を省略できます。ヘッダー（現在の日時を含む）とフッター（URL とページを含む）あります。

chrome --headless=new --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=new --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 秒後に「2」と続きます 42 秒後のページの状態をキャプチャし、PDF として保存する方法を次に示します。

chrome --headless=new --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=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu

デバッグ

Chrome はヘッドレスモードでは実質的に見えなくなるため、わかりにくいように聞こえるかもしれません困難です。ヘッドレス Chrome は、ヘッドフル Chrome に似ています。

Chrome をヘッドレスモードで起動するには、 --remote-debugging-port コマンドラインフラグ。

chrome --headless=new --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 のリモートデバッグを使用して接続するヘッドレスターゲットに送って調べます。

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

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

フィードバック

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

Chrome ヘッドレス モード

ヘッドレスの仕組み

ヘッドレス モードを使用する

Puppeteer 内

Selenium-WebDriver 内

コマンドライン フラグ

--dump-dom

--screenshot

--print-to-pdf

--timeout

--virtual-time-budget

--allow-chrome-scheme-url