Chrome CDP

軽量な Chrome DevTools Protocol CLI。WebSocket を通じて直接接続します — Puppeteer は不要で、100+ 個のタブに対応し、即座に接続できます。

前提条件

• リモートデバッグが有効な Chrome (または Chromium、Brave、Edge、Vivaldi)：chrome://inspect/#remote-debugging を開いてスイッチを有効にしてください
• Node.js 22+ (組み込み WebSocket を使用)
• ブラウザの DevToolsActivePort が標準以外の場所にある場合は、CDP_PORT_FILE をその完全なパスに設定してください

コマンド

すべてのコマンドは scripts/cdp.mjs を使用します。<target> は list コマンドからの 一意な targetId プレフィックスです。list 出力に表示されているプレフィックス全体をコピーしてください (例：6BE827FA)。CLI は曖昧なプレフィックスを拒否します。

開いているページを一覧表示

scripts/cdp.mjs list

スクリーンショットを撮る

scripts/cdp.mjs shot <target> [file]    # default: screenshot-<target>.png in runtime dir

ビューポートのみ をキャプチャします。折り返し以下のコンテンツが必要な場合は、eval でスクロールしてください。出力にはページの DPR と座標変換のヒントが含まれます (下の 座標 を参照)。

アクセシビリティツリースナップショット

scripts/cdp.mjs snap <target>

JavaScript を実行

scripts/cdp.mjs eval <target> <expr>

注意： 複数の eval 呼び出し間で DOM が変更される可能性がある場合 (例：クリック後にカードのインデックスがシフト)、インデックスベースの選択 (querySelectorAll(...)[i]) を避けてください。すべてのデータを 1 つの eval で収集するか、安定したセレクターを使用してください。

その他のコマンド

scripts/cdp.mjs html    <target> [selector]   # full page or element HTML
scripts/cdp.mjs nav     <target> <url>         # navigate and wait for load
scripts/cdp.mjs net     <target>               # resource timing entries
scripts/cdp.mjs click   <target> <selector>    # click element by CSS selector
scripts/cdp.mjs clickxy <target> <x> <y>       # click at CSS pixel coords
scripts/cdp.mjs type    <target> <text>         # Input.insertText at current focus; works in cross-origin iframes unlike eval
scripts/cdp.mjs loadall <target> <selector> [ms]  # click "load more" until gone (default 1500ms between clicks)
scripts/cdp.mjs evalraw <target> <method> [json]  # raw CDP command passthrough
scripts/cdp.mjs open    [url]                  # open new tab (each triggers Allow prompt)
scripts/cdp.mjs stop    [target]               # stop daemon(s)

座標

shot はネイティブ解像度で画像を保存します：画像ピクセル = CSS ピクセル × DPR。CDP Input イベント (clickxy など) は CSS ピクセル を使用します。

CSS px = screenshot image px / DPR

shot は現在のページの DPR を出力します。一般的な Retina (DPR=2)：スクリーンショット座標を 2 で除算します。

ヒント

• ページ構造に対しては html ではなく snap --compact を推奨します。
• クロスオリジン iframe のテキスト入力には (eval ではなく) type を使用してください — 最初に click/clickxy でフォーカスし、その後 type を実行してください。
• Chrome は最初のアクセス時にタブごとに 1 回「デバッグを許可」モーダルを表示します。バックグラウンドデーモンがセッションを保持しているため、後続のコマンドにはさらなる承認が不要です。デーモンは 20 分の非アクティブ後に自動終了します。