Chrome ヘッドレス モードでは、無人環境でブラウザを実行できます。 ユーザーインターフェースです基本的に、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/
これは、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 のリモート デバッグを使用して接続する ヘッドレス ターゲットに送って調べます。
- [
chrome://inspect
] に移動し、[Configure...] ボタンをクリックします。 - WebSocket URL の IP アドレスとポート番号を入力します。
- 前の例では、「
127.0.0.1:60926
」と入力しました。
- 前の例では、「
- [完了] をクリックします。Remote Target が表示され、そのすべてのタブと ターゲットにできます
- [inspect] をクリックして Chrome DevTools にアクセスし、リモート ページのライブビューを含むヘッドレス ターゲット。
フィードバック
ヘッドレス モードについてのフィードバックをお待ちしています。条件 問題が発生した場合は、バグを報告してください。