chrome-remote-interface を試してみた

frontend browser

こんにちは。昨日はボウモアを呑みました。きたけーです。

node-webkitで作ったアプリのデバッグのためにchrome-remote-interfaceを試してみたのでメモ。

chrome-remote-interface

cyrus-and/chrome-remote-interface · GitHub は、Remote Debugging Protocol のnodeのインターフェイスで、
普段、Chromeのデベロッパーツールで見ている通信の内容とかページを表示するまでの流れのようなものをプログラムで取得することができる。

npm install --save chrome-remote-interface

ハマりどころとして、chrome-remote-interfaceはネイティブモジュールに依存しているんですが、node-webkitでモジュールを使うために、リビルドしてあげる必要があります(node-webkitのABIとnodeのABIが違うから)。 リビルドは、node_modulesの下のネイティブモジュールのディレクトリに移動して、以下のコマンドを叩くかんじです(targetに対象のnode-webkitのバージョンを指定します)。

npm install -g nw-gyp
cd node_modules/chrome-remote-interface/node_modules/ws
nw-gyp rebuild --target=0.11.2

remote debugging portを有効にする

node-webkitのオプションでremote debugging portを有効にします。こんなかんじです。 --remote-debugging-portオプションでポート番号を指定します。

/Applications/node-webkit.app/Contents/MacOS/node-webkit . --remote-debugging-port=9222

ちなみにChromeの場合はこんなかんじです。

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

いろんなイベントをハンドリングしてみる

リクエストを送る前のイベントをハンドリングする場合はこんなかんじです。

var Chrome = require('chrome-remote-interface');

Chrome(function (devTools) {
  devTools.Network.enable();

  devTools.on('Network.requestWillBeSent', function (message) {
    console.log(message);
  });
});

Remote Debugging Protocol 1.1 - Google Chrome

↑でイベントとか行える操作を調べることができるので、さっと目を通しておいて、必要なときに深く読むとよさそう。