Chrome DevToolsプロトコル（CDP）とは何ですか？

要約：

• Chrome DevTools Protocol（CDP）は、外部ツールがChromiumベースのブラウザを計器、検査、デバッグ、プロファイリングするためのワイヤプロトコルです。 Chrome DevTools自体はCDPを介してブラウザと通信し、Puppeteer、Playwright、chromedpもそうです。
• CDPはドメインに分かれています。 各ドメイン（Page、Network、DOM、Runtime、Target、Browser、Input、および60以上の他のドメイン）は、受け入れるコマンドと発行するイベントを定義します。
• トランスポートはWebSocketを介したJSONメッセージです。 クライアントはid、method、paramsを含むJSONオブジェクトとしてコマンドを送信し、ブラウザは一致する結果で応答し、イベントが発生するたびにストリームします。
• 2つのトラックがあります。 tip-of-tree（tot）バージョンは互換性の保証なしに頻繁に変更され、安定した1.3バージョン（Chrome 64から）はサポートされているサブセットです。
• CDPは、現代の自動化がブラウザに接続する方法です — リモートブラウザも含まれます。CDPクライアントをWebSocketエンドポイントにポイントすると、そのブラウザをどこで実行されていても操作できます。
• Scrapeless Scraping BrowserはCDPエンドポイントです。 Puppeteer、Playwright、またはchromedpは、1つのWebSocket URLに接続し、変更されていないリアルクラウドChromiumに対して実行します。
• 開始無料。 新しいScrapelessアカウントには、無料のScraping Browserランタイムが含まれています — app.scrapeless.comでサインアップしてください。

はじめに：自動化がChromeに話しかける言語

Chrome DevTools Protocolは、外部ツールがブラウザを制御し観察できるようにブラウザが公開するインターフェースです。ChromeのDevToolsパネルを開いてネットワークリクエストを確認したり、JavaScriptをステップ実行したりする際、パネルは直接ブラウザにアクセスしているのではなく、CDPコマンドを送信し、接続を介してCDPイベントを受信しています。Chromium上に構築されたすべてのブラウザ自動化ライブラリは、下層の同じプロトコルを使用しています。

これはスクレイピングやテストにおいて重要です。なぜなら、CDPはスクリプトがDevToolsを持つ人間ができること（ナビゲート、レンダリング後のDOMの読み取り、リクエストのインターセプト、スクリーンショットの取得、ページでのJavaScriptの評価）を可能にするからです。このガイドでは、CDPとは何か、ドメインとメッセージがどのように機能するか、そしてなぜCDPエンドポイントがクラウドブラウザを操作するときに接続するものなのかを説明します。

CDPは正確には何か

Chrome DevTools Protocolは、ツールがChromium、Chrome、および他のBlinkベースのブラウザを計器、検査、デバッグ、プロファイリングできるようにします。これはブラウザの内部をリモートで制御するためのインターフェースで、Chrome DevToolsチームによって維持されています。公式プロトコル定義には、すべてのドメイン、コマンド、イベントがリストされています。また、ブラウザも/json/protocol/エンドポイントで同じ定義を公開しています。

CDP自体はスクレイピングツールではありません — ツールの下層にあるレイヤーです。Puppeteer、Playwright、chromedp、Lighthouseはすべて、高水準の呼び出しをCDPコマンドに変換するため、CDPを話す任意のブラウザを操作できます。

CDPの構成：ドメイン、コマンド、およびイベント

CDPはブラウザの表面をドメインに分割し、各ドメインは一連のコマンドとイベントを所有します。60以上のドメインがあり、スクレイパーが最も触れるものは小さなサブセットです：

コマンドはドメインに送信するリクエストです（例えば、Page.navigate）。イベントは何かが起こったときにブラウザがプッシュするメッセージです（例えば、Network.responseReceived）。Puppeteerのような高水準の呼び出しは、Page.navigateコマンドとその下のライフサイクルイベントを待つことを組み合わせたものです。

トランスポート：WebSocketを介したJSONメッセージ

CDP通信は、固定構造のシリアライズされたJSONオブジェクトであり、WebSocket接続を介して運ばれます。クライアントはブラウザのデバッグWebSocketに接続し、その後、JSONデータ形式によって定義されたメッセージを交換します。

コマンドは、id、ドメインとコマンドを指定するmethod、およびparamsオブジェクトを含みます：

// ブラウザに送信されたコマンド
{ "id": 1, "method": "Page.navigate", "params": { "url": "https://example.com" } }

// 一致するidで返された結果
{ "id": 1, "result": { "frameId": "…", "loaderId": "…" } }

// ブラウザによってプッシュされたイベント（idなし）
{ "method": "Page.loadEventFired", "params": { "timestamp": 12345.6 } }

idは、結果をそれを生成したコマンドに関連付けます。イベントはブラウザが自分のスケジュールで発行するため、idなしで到着します。クライアントは通常、WebSocketを開いて、関心のあるドメイン（Network.enable、Page.enable）を有効にし、その後のセッションの間、コマンドとイベントを交互に挿入します。

プロトコルのバージョン: tip-of-tree と stable

CDPは二つのトラックで提供されます。tip-of-tree（tot）バージョンは最新のChromiumを追跡し、頻繁に変更され、後方互換性の保証はありません。stable 1.3 バージョンはChrome 64で導入され、安定性のためにツールがターゲットにすることができるサポートされたサブセットです。別のv8-inspector表面は、Node.jsのデバッグとプロファイリングのために同様のスタイルのプロトコルを公開します。ほとんどの自動化ライブラリはChromiumビルドに固定し、一致するプロトコルを使用するため、ライブラリとブラウザのバージョンは一緒に動くことが期待されます。

CDPを使用するもの

CDPは広範なツールセットの下にある共有基盤です：

• Chrome DevTools — ブラウザ内のパネルはCDPクライアントです。
• Puppeteer — デフォルトでCDPを介して接続します。
• Playwright — CDPを介してChromiumを操作します（FirefoxとWebKitのために独自のプロトコルを実装しています）。
• chromedp — CDPを直接扱うGoライブラリです。
• Lighthouse — CDPを介してパフォーマンスと監査データを収集します。

彼らは全て同じプロトコルを使用しているため、自分が起動しなかったブラウザに接続することができます — そのブラウザがCDPエンドポイントを公開している限り。新たに出現したクロスブラウザ標準である、WebDriver BiDiは、CDPが先駆けた双方向コマンドおよびイベントモデルに基づいています。

CDPとクラウドブラウザ

CDPエンドポイントは、あなたのマシン上にある必要はありません。プロトコルがWebSocketを介して動作するため、クライアントはどこで動作しているブラウザに接続することができます — これはまさにクラウドブラウザの仕組みです。Scrapeless Scraping Browserは単一のWebSocket URLでCDPエンドポイントを公開しているため、CDPクライアントはローカルの代わりに実際のクラウドChromiumに接続します：

• Puppeteerはpuppeteer.connect({ browserWSEndpoint })で接続します。
• Playwrightはchromium.connectOverCDP()で接続します。
• chromedpはNewRemoteAllocatorで接続します。

コードは変更されず、エンドポイントだけが移動します。ブラウザはクラウドで実際のChromiumフィンガープリントと住宅の出口を持って実行され、あなたのCDPを話すライブラリはローカルブラウザを操作するのと全く同じようにそれをドライブします。

同じエンドポイントは、標準プロトコルを超えるいくつかのドメインにも応答します — CAPTCHA検出と解決のためのCaptcha.*、シミュレートされたクリックと入力のためのAgent.* — これらはScrapeless CDP APIリファレンスで文書化されています。既にCDPを話すクライアントは、Page.navigateを呼び出すのと同じ方法でそれらを呼び出すことができます。

無料プランのAPIキーをapp.scrapeless.comで取得してください。

無料プランのAPIキーを取得してください: app.scrapeless.com

結論: すべてのChromiumツールの下にある一つのプロトコル

CDPはブラウザ自動化の下にある共通の層です：WebSocketを介してJSONコマンドとイベントとして交換されるドメインのセットで、ツールがChromiumブラウザを操作し観察することを可能にします。それを理解することで、Puppeteer、Playwright、chromedpが内部で似ている理由、ライブラリとブラウザのバージョンが一緒に移動する理由、リモートブラウザに接続することが別のWebSocket URLを指すだけで簡単な理由が説明されます。PythonからCDP経由でクラウドブラウザを操作する実例については、Scraplingプロダクションスクレーパーガイドをご覧いただき、Scrapeless料金ページでプランを比較してください。

CDPを介してクラウドブラウザを操作する準備はできましたか？

コミュニティに参加して無料プランを取得し、CDPベースの自動化を構築している開発者とつながりましょう: Discord · Telegram。
以下の英語のテキストを日本語に翻訳しました：

app.scrapeless.com にサインアップして、無料のスクレイピングブラウザのランタイムを利用し、CDPクライアントを1つのWebSocket URLを介してクラウドブラウザにポイントしてください。

よくある質問 (FAQ)

Q: CDPはWebDriverと同じですか？
いいえ。CDPはChromium自身の低レベルで双方向のプロトコル（WebSocketを介したコマンドとイベント）です。従来のWebDriverはW3Cによって標準化されたリクエスト-レスポンスのHTTPプロトコルです。新しいWebDriver BiDi標準は、ブラウザ間でCDPスタイルの双方向モデルを提供します。

Q: スクレイパーを書くときにCDPを直接使用しますか？
通常は使用しません。Puppeteer、Playwright、またはchromedpというライブラリを使用して、あなたの呼び出しをCDPコマンドに変換します。ライブラリが公開していない機能のために、生のCDPに落ちることはあります。

Q: PlaywrightはCDPを使用していますか？
Chromiumの場合、はい。PlaywrightはCDPを介してChromiumを操作します。FirefoxとWebKitの場合は独自のプロトコルを使用しているため、一部のCDP特有の機能はChromium専用です。

Q: ツールはどのようにCDPを介してブラウザに接続しますか？
ブラウザはデバッグ用のWebSocket URLを公開します。クライアントはそのWebSocketを開き、JSONコマンドとイベントを交換します。Scrapelessのようなクラウドブラウザは、そのWebSocket URLを直接提供するので、同じクライアントがリモートブラウザに接続します。

Q: tip-of-treeと安定したCDPの違いは何ですか？
tip-of-treeは最新のChromiumを追跡しており、通知なしに変更される可能性があります。一方で、安定した1.3（Chrome 64から）は、ツールが依存できる固定のサブセットです。ライブラリは一般的に、Chromiumビルドとそれに付属するプロトコルバージョンにピン留めします。