Chrome ヘッドレス モードを使用すると、UI を表示せずに無人環境でブラウザを実行できます。つまり、Chrome なしで Chrome を実行できます。
ヘッドレス モードは、Puppeteer や ChromeDriver などのプロジェクトを通じて、ブラウザの自動化によく使用されます。
ヘッドレス モードを使用する
ヘッドレス モードを使用するには、--headless コマンドライン フラグを渡します。
chrome --headless
古いヘッドレス モードを使用する
以前のヘッドレス モードは、同じ 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/
これは、curl で行う HTML ソースコードの出力とは異なります。--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 フラグは、PDF を印刷する前に最大 5 秒間待機するように Chrome に指示します。したがって、このプロセスの実行には最大で 5 秒かかります。
--virtual-time-budget
--virtual-time-budget は、時間に依存するコード（setTimeout/setInterval など）の「早送り」として機能します。ページに時間の経過を認識させながら、ブラウザにページのコードが可能な限り速く実行されるように強制します。
使用例として、setTimeout(fn, 1000) を使用してカウンタを 1 秒ごとにインクリメント、ロギング、表示するデモについて考えてみましょう。関連するコードは次のとおりです。
<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 --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 と非常によく似た方法でデバッグできます。
--remote-debugging-port コマンドライン フラグを使用して、ヘッドレス モードで Chrome を起動します。
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 リモート デバッグを使用してヘッドレス ターゲットに接続し、調査できます。
chrome://inspectに移動し、[Configure…] ボタンをクリックします。- WebSocket URL の IP アドレスとポート番号を入力します。
- 上の例では、
127.0.0.1:60926と入力しました。
- 上の例では、
- [完了] をクリックします。リモート ターゲットが表示され、そのすべてのタブと他のターゲットが一覧表示されます。
- [検査] をクリックして Chrome DevTools にアクセスし、ページのライブビューなど、リモートのヘッドレス ターゲットを検査します。
フィードバック
ヘッドレス モードについて、皆様からのフィードバックをお待ちしております。問題が発生した場合は、バグを報告してください。