技術/Chrome/Remote Debugging Protocol

• [ Prev ]
• [ Next ]
• [ 技術 ]

2015-03現在、Chromeではリモートデバッグ機能がある。スゴイ。
NetBeans7.4あたりを試した時に、HTML5プロジェクトのデバッグするとChromeが立ち上がり、NetBeans上からJSにブレークポイント設定できたりステップ実行できて「ナニコレすごい、どうなってるの？」と思ったものだが、どうもこの機能を使っているようだ。

参考：

• Remote debugging protocol - Google Chrome
  • https://developer.chrome.com/devtools/docs/debugger-protocol
• Remote Debugging Protocol 1.1 - Google Chrome
  • https://developer.chrome.com/devtools/docs/protocol/1.1/index
    • 2015-03時点での現行のプロトコルのリファレンス。
• Showcase Chrome Debugging Protocol Clients - Google Chrome
  • https://developer.chrome.com/devtools/docs/debugging-clients
    • 実際にRemote Debugging Protocol を使ったデバッグクライアントの紹介ページ

chrome単体でもリモートデバッグを体験できる。Chromeに"--remote-debugging-port=NNNN"オプションをつけると、そのポート番号でDevTools画面を提供してくれるため、他のChromeから localhost:NNNN にアクセスするとDevTools画面が表示されデバッグできる。

1. まずchrome.exeがどこにあるか調べる。Winならタスクマネージャからchrome.exeのプロパティを開いてフルパスを確認する。
今日試してみたら、以下の場所にあった。

C:\Users\(ユーザ名)\AppData\Local\Google\Chrome\Application\chrome.exe

2. デバッグ対象のchromeを起動する。"--remote-debugging-port=NNNN" オプションを付けてあげる。また、"--user-data-dir=<some directory>" でユーザプロファイルを分離してあげるとクリーンな状態のChromeをデバッグ出来るので良さげ。
→コマンドプロンプトから起動してみる。

> cd C:\Users\(ユーザ名)\AppData\Local\Google\Chrome\Application
> chrome.exe --remote-debugging-port=9222  --user-data-dir=c:\work\temp\chrome-test-profile1

3. 起動したchromeウインドウで、試しに何かデバッグしたいWebサイトを読み込んでみる。

4. デバッガとして操作するChromeを起動し、"--remote-debugging-port" に指定したポートでlocalhostにアクセスしてみる。
上の例なら以下にアクセス：

http://localhost:9222/

→"Inspectable pages" という画面で、デバッグ対象chromeで表示しているタブ一覧が表示される。デバッグしたいタブをクリックすると、対応するDevTools画面が表示される。

実際のデバッグコマンドについては、WebSocketで接続してJSONメッセージをやりとりしている。
もし自分なりのデバッグクライアントを作りたい場合は、まずデバッグ対象のchromeを起動し、以下のURLで 4. の"Inspectable pages" の結果と同じJSONを取得する。

http://localhost:9222/json

→例：

[ {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/devtools.html?ws=localhost:9222/devtools/page/AC37C271-FFCA-4B84-A731-0A66D36FAC48",
   "id": "AC37C271-FFCA-4B84-A731-0A66D36FAC48",
   "title": "Example Domain",
   "type": "page",
   "url": "http://www.example.com/",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/AC37C271-FFCA-4B84-A731-0A66D36FAC48"
}, {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/devtools.html?ws=localhost:9222/devtools/page/6590A241-CB03-4F2B-9584-11170006F771",
   "id": "6590A241-CB03-4F2B-9584-11170006F771",
   "title": "技術/HTTP/Fenix Web Server (静的ページ開発用ローカルWebサーバ) - Glamenv-Septzen.net",
   "type": "page",
   "url": "http://www.glamenv-septzen.net/view/1364",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/6590A241-CB03-4F2B-9584-11170006F771"
} ]

→webSocketDebuggerUrlがRemote debugging protocolで規定されたデバッグメッセージをやりとりするWebSocketのURLなので、好きな言語・好きなWebSocketクライアントライブラリでアクセスし、JSONメッセージをやりとりする。

どんなメッセージがあり、どういう仕様かは冒頭の参考リンク、"Remote Debugging Protocol 1.1" で網羅されている。およそDevToolsでできることはひと通りできる。

オリジナルのデバッガを作りたい場合は冒頭の参考リンク、"Showcase Chrome Debugging Protocol Clients" を見ると良さそう。GitHubでソースが公開されているものも多い。複雑な凝ったものもあるが、以下のプロジェクトはシンプルなpythonコードになっていて、まずはこの辺りを参考にして組み立てていくと良いかも。

• https://github.com/minektur/chrome_remote_shell

• [ Prev ]
• [ Next ]
• [ 技術 ]