ヘッドレス モードでデバッグする

Mathias Bynens
Peter Kvitek
Peter Kvitek

ヘッドレス モードでは 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 のリモート デバッグを使用して ヘッドレス ターゲットに接続し、検査できます。

  1. chrome://inspect に移動し、[Configure…] ボタンをクリックします。
  2. WebSocket URL から IP アドレスとポート番号を入力します（例: 127.0.0.1:60926）。
  3. [完了] をクリックします。すべてのタブとその他のターゲットが一覧表示されたリモート ターゲットが表示されます。
  4. [inspect] をクリックして Chrome DevTools にアクセスし、ページのライブビューなど、リモートのヘッドレス ターゲットを検査します。

Chrome DevTools でリモートのヘッドレス ターゲット ページを検査できます。