PhantomJSのリモートデバッギング的なアレ

Remote Debugging

Remote debugging permits inspection of the script and web page via another WebKit-based browser (Safari and Chrome). Troubleshooting · ariya/phantomjs Wiki

PhantomJSにおける地獄のconsoleデバッグよりも、場合によってはマシかもしれないリモートデバッグのメモ。

phantomjs --remote-debugger-port=9000 test.js 

--remote-debugger-port オプションで、ポート番号を指定するとリモートデバッガにアクセスできる。上記の例であれば、http://localhost:9000 で開ける。

手順

1. --remote-debugger-port:9000 オプションつきでphantomsを叩く (ポート番号はお好きに)
2. http://localhost:9000 を開く
3. about:blank のリンクを開く -> PhantomJSのプロセスを対象としたWebインスペクター(A)が開く
4. Console から __run() を実行する
5. page.open() のコールバックから debugger を実行する
6. http://localhost:9000 をもう1枚開く
7. PhantomJS 内で開いているページのリンクを開く 対象ページのWebインスペクター(B)が開く
8. Webインスペクター(A)からステップを進める
9. page.evaluateAsync のコールバックから debugger を実行する
10. Webインスペクター(B)を開くと、任意のタイミングで止まってる

適当サンプル

Troubleshooting · ariya/phantomjs Wiki のサンプルを愚直に実行するとこうなる。

var page = require('webpage').create();

function debugPage() {
  console.log('Refresh a second debugger-port page and open a second webkit inspector for the target page.');
  console.log('Letting this page continue will then trigger a break in the target page.');
  debugger;
  page.evaluateAsync(function() {
    debugger;
  });
}

page.open('http://google.com', function() {
  debugPage();
});

ちなみにこのオプションは、CasperJSでもちゃんと実行できるので、Casperで統合テストを書くときちょっと便利かもしれない。debugger の差し込み周りを整理すれば取り回しはマシになると思われる。

---