Node.jsやCasperJSでのデバッグ

概要

クジラ飛行机さんの本「JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック」で勉強中です。本を参考にして、Node.jsやCasperJSを使ったプログラムを試作してます。これに際し、デバッグで躓いたので、他の人でも参考になる可能性があると考え、メモを作成しました。

JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック

Node.jsでのデバッグ

Node.jsでも、通常のJavascriptと同様に、ステップ実行や、ブレイクポイントの設定等ができます。

node-inspectorのインストール

npmコマンドでnode-inspectorをインストールします。

$ npm install -g node-inspector

デバッガーの起動

node-debugコマンドで対象プログラムをデバッグします。以下、対象プログラムがxxx.jsとします。

$ node-debug xxx.js

上記により、nodeがデバッグモードで起動され(node --debug-brk xxx.js)、chromeのdeveloper toolsの画面で対象プログラム(xxx.js)が表示され、ステップ実行やブレイクポイントの設定等ができます。
(注)chromeが標準のブラウザに設定されていることが前提で書いています。

なお、WebStromなどの統合開発環境では、元々、ステップ実行やブレイクポイント設定等のデバッグができるようです。

補足

上記のようなやり方に気付く前は、console.logで途中状態を出力して、何とかデバッグしていました。

CasperJSでのデバッグ

CasperJSでのデバッグは、CasperJSで実行されるスクリプトのデバッグと、evaluateによってPhantomJSで実行される関数のデバッグの2点で対応が必要です。

CasperJSで実行されるスクリプトのデバッグ

CasperJSでは、nodeコマンドではなく、casperjsコマンドで起動するので、デバッグ方法がnodeと少し異なります。しかし、ほぼ同様に、chromeのdeveloper toolsの画面で、ステップ実行やブレイクポイントの設定ができます。以下、対象プログラムがxxx.jsとします。

1. xxx.jsの先頭に文"debugger;"を追加
2. コマンドプロンプトで「casperjs xxx.js --remote-debugger-port=9000」を実行
3. chromeでデバッガーポート(http://localhost:9000)を開く
4. developer toolsのConsole Tabで「__run();」を実行

上記により、chromeのdeveloper toolsの画面にxxx.jsが表示され、"debugger;"文で実行が停止します。後は、ステップ実行やブレイクポイントの設定を必要に応じて行ってください。

evaluateによってPhantomJSで実行される関数のデバッグ

evaluateによってPhantomJSで関数が実行される際、デフォルトでは、console.logでのメッセージの出力や、エラーが発生した際のメッセージの出力が全く行われません。これが行われるようにするためには、以下が必要です。

var casper = require("casper").create();
casper.start();

// 色々なイベントをcasper.echoで表示するための設定
casper.on('remote.alert', function(msg) {
  this.echo("REMOTE-ALERT: " + msg);
});

casper.on('remote.message', function(msg) {
  this.echo("REMOTE-MESSAGE: " + msg);
});

casper.on("page.error", function(msg, trace) {
  this.echo("REMOTE-ERROR: " + msg);
  this.echo("TRACE:");
  for (var i = 0; i < trace.length; i++) {
    var trec = trace[i];
    this.echo("file: " + trec.file + " , line: " + trec.line + " , function: " + trec.function);
  }
});

casper.on("run.complete", function() {
    casper.echo("CASPER RUN COMPLETE")   
});

補足

上記のようなやり方に気付く前は、PhantomJSの画面をキャプチャし、何とかデバッグしていましたが、結構大変でした。また、evaluateでは、エラーが発生しているか分からず、また、どこでエラーが発生しているかも分からず、非常に大変でした。

あとがき

上記のようなやり方は、あまり纏まって書かれていなかったので、メモにまとめてみました。少しでも皆様のお役にたてれば幸いです。