概要
前回の記事では、Chrome DevTools Protocol（CDP） の概要と、Seleniumなどのブラウザ自動化ツールとの違いを整理しました。
CDPを利用すると、ChromeやEdgeなどのChromium系ブラウザを外部プログラムから操作できるようになります。
ただし、通常のブラウザ起動ではCDPには接続できません。
CDPを利用するためには、ブラウザを リモートデバッグモード で起動する必要があります。
この記事では次の内容を整理します。
- EdgeをCDPモードで起動する方法
- CDP接続情報の確認方法
- タブへの接続方法
CDP接続の仕組み
CDPは基本的に WebSocket通信でブラウザとやり取りします。
大まかな流れは次の通りです。
- ブラウザをCDPモードで起動
- HTTPで接続情報を取得
- WebSocket URLを取得
- WebSocketで接続
- JSONコマンドを送信
初めて触ると少し複雑に見えますが、
実際には ブラウザが接続情報を公開しているだけなので、その情報を取得して接続します。
EdgeをCDPモードで起動する
EdgeをCDPモードで起動するには、次のオプションを付けて起動します。
msedge.exe --remote-debugging-port=9222
このオプションを付けると、Edgeは ポート9222でCDP接続を受け付ける状態になります。
Windowsでは例えば次のように起動できます。
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --remote-debugging-port=9222
起動すると通常のEdgeと同じようにブラウザが立ち上がりますが、この時点ですでにCDP接続が可能になっています。
見た目は特に変わらないため、最初は「本当にCDPが有効になっているのか？」と少し不安になりますが、後で接続確認ができます。
/json/version で接続確認
CDPモードでブラウザを起動すると、接続情報をHTTPで取得できます。
ブラウザで次のURLを開いてみます。
http://localhost:9222/json/version
すると次のようなJSONが表示されます。
{
"Browser": "Edge/...",
"Protocol-Version": "1.3",
"webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/..."
}
ここで重要なのは webSocketDebuggerUrl です。
このURLが、CDPでブラウザに接続するための WebSocket接続先になります。
つまりCDPでは
- HTTP → 接続情報の取得
- WebSocket → 実際の操作
という役割になります。
/json/list でタブ一覧を取得する
CDPではブラウザ全体だけでなく、個々のタブにも接続できます。
現在開いているタブの一覧は次のURLで取得できます。
http://localhost:9222/json/list
例えば次のようなJSONが返ってきます。
[
{
"id": "XXXX",
"title": "Example",
"url": "https://example.com",
"webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/XXXX"
}
]
ここでも webSocketDebuggerUrl が重要です。
このURLにWebSocketで接続すると、そのタブを操作できるようになります。
つまりCDPでは
- browser接続
- page（タブ）接続
という2種類の接続が存在します。
実際のブラウザ操作では、page（タブ）に接続するケースが多いと思います。
CDP接続のイメージ
ここまでの流れを整理すると、CDP接続は次のような構成になります。
スクリプト
│
│ HTTP
↓
http://localhost:9222/json/list
│
│ WebSocket URL取得
↓
ws://localhost:9222/devtools/page/XXXX
│
│ WebSocket
↓
ブラウザ操作
最初は少し回りくどく感じますが、
接続情報をHTTPで取得してからWebSocketで接続する
と覚えておくと理解しやすいと思います。
補足
JSONのやり取りをするのはHTTPイメージに近いので分かりやすいのですが、WebSocket部分がちょっと分かりにくい部分です。
WebSocketはHTTPと違って双方向の通信を行います。要は外部からJSONでコマンドを送り込むと、ブラウザからコマンドのレスポンスや、ブラウザ上のイベントなどが返ってきます。
これらはHTTPのようなリクエスト→レスポンスではなく、WebSocketで繋いだポートから双方向でコマンドやイベントの情報が流れ続ける感じです。WebSocket上を流れているメッセージはJSONなんですけど、RESTとは異なる通信です。
Seleniumなどのツールでは接続処理をすべてツールが隠してくれますが、CDPは比較的低レイヤーの仕組みなので仕組みは理解しておく必要があります。
ただ一度流れが分かると
- 接続
- JSONコマンド送信
- 結果取得
というシンプルな構造で、一度作成してしまえば、同じことの繰り返しなので、そこまで煩雑ではないかなと思います。
まとめ
今回は、EdgeをCDPモードで起動し、接続情報を確認する方法を整理しました。
CDPを利用するための基本的な流れは次の通りです。
--remote-debugging-portを付けてブラウザを起動/json/versionや/json/listで接続情報を取得webSocketDebuggerUrlに接続
次回は、実際に WebSocketでCDPに接続し、ブラウザにコマンドを送信する方法を見ていきます。
このシリーズ
次の記事
前の記事