node.jsのサーバサイドコードを、chromeブラウザを使ってデバッグする方法

ご無沙汰してます。といっても定期的に見てる人なんてほとんどいないでしょうがw
先々週あたりぐらいまでは決してサボっていたわけではなく、
サーバサイドjavascriptのデバッグに慣れるために時間を費やしていました。
が、先週から今までは業務多忙で手ついてませんでした。
やっと少しだけ時間が確保できたので、先々週までの学習内容をまとめます。

ExtJSを触り始めた時にはクライアントサイドなので、
firefoxのfirebugを使ってデバッグしていたのですが、
node.js＋NextJS環境のサーバーサイドのJavascriptに関しては、
デバッグ方法をまったく知らなかったので少し調べてみました。

Eclipseのようなビシッとした統合開発環境は、
私の非力なNetbookでは動きが非常に鈍くなりますので、
なんかお手軽なものはないかと探して見たところ、
割とヒットするのが「chrome＋node-inspector」を使ったデバッグ方法です。

chromeは「Webkit」というHTML,CSS,Javascript等を解釈する
レンダリングエンジンを搭載しています。
そのWebkitにはjavascriptをデバッグする機能があるそうなのですが、
その機能を使ってなんとchromeブラウザを使って
サーバサイドjavascriptのデバッグをやってしまおうというんですから、
世の中にはすごいこと考える人がいるんだなぁと感心してしまいますねー。

大筋としてはこんな感じでしょうか？

サーバサイドでnode-inspectorというコマンドを使ってデバッグ用のサーバ？を動かす。（portは5858）
デバッグしたいサーバをnodeコマンドに「--debug」オプションを指定してデバッグモードで開始する。（デバッグモードで起動したサーバは、port5858と通信するっぽい？）
この状態にて「http://127.0.0.1:8080/debug?port=5858」にアクセスする。
デバッグ情報が、前項でアクセスしたタブに表示される。

ただしNextJS上で動かすJavascriptファイルをデバッグする時には気をつけなければいけないことがありますので、最後に注意点をまとめて記載します。

では、環境構築という名の下ごしらえから。

下ごしらえ

node-inspectorのインストール

一応ホームディレクトリに移動したのち、
npmコマンドを使ってnode-inspectorをインストールします。

$ cd
$ npm install node-inspector

インストール先は「~/node_module/node-inspector/」になります。
配下のbinディレクトリにinspector.jsがありますので、
好き好きでパスを切ったりして使いやすいようにしておきましょう。
私は「~/bin」にパスを切っていて、ここにシンボリックリンクを張りました。

chromeのインストール

当然ですが、chromeをインストールします。

$ sudo apt-get install chromium-browser

と書いては見たものの、apt-getで入れたかsynapticで入れたか忘れちゃいましたw
ま、どっちでもいいのでとにかく入れます。

node-inspectorの起動

node-inspectorを端末から起動します。
「&」をつけてバックグラウンドで動かしてもいいっす。
自分はパスを切ったのでこんな感じで実行できます。

$ node-inspector &

デバッグ対象のWebアプリの起動

node.jsを使った典型的なサンプル用Webサーバーを使用して動作確認をするため、
こんな内容のjavascriptファイルを作成します。

$ cd
$ echo "
var http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World!');
}).listen(8124);
console.log('Server running at http://127.0.0.1:8124/');
" > test.js
$ node --debug test.js

最後の行で、test.jsで定義したhttpサーバがデバッグモードでポート8124にて待機します。

chromeにてデバッガの動作確認

次にインストールしてあるchromeブラウザを起動し、次のURLにアクセスしてください。

http://localhost:8080/debug?port=5858

node-inspectorが提供するデバッグ情報が表示されます。
scriptsタグを選択すると、現在ロードされているJSファイルを一覧表示することが可能になりますので、test.jsを選択します。
すると、test.jsのソースコードが同タブにて表示されます。

  res.end('Hello World!');

辺りの行番号をマウスでクリックすると、ブレークポイントを設定できます。

次に、新しいタブを表示し、次のURLにアクセスします。

http://localhost:8124

アクセスすると、既にtest.jsはロードされているので、
先ほどのデバッグ用タブにて設定したブレークポイントで、
処理が停止していることを確認できます。
この状態になれば、ステップ実行、ステップイン実行などもできます。
すげー。

注意点

さて、NextJSでこのデバッガを動かす時の注意点です。
（と言っても、NextJS限定というわけではなく、
　動的にロードされるJSファイル全般について言えることだと思われます。）
node-inspector動きを見る限り、こやつがデバッグ対象にできるのは既にロードされているJSファイルのみであるようです。
ま、当たり前っちゃ当たり前なんですが。
なので、未ロードのファイルはデバッグ用タブではscriptsの一覧に表示されていません。
また、Webアプリ側でロードされても、そのままの状態ではnode-inspector側はロードされたことを感知できない？ようで、
node-inspector側のページ（http://localhost:8080/debug?port=5858）をリフレッシュしないと、
デバッグしたいWebアプリの最新の状態を読込めないように見えます。

ロードされたファイルが自動的に表示されるようになれば嬉しいんですが、
まぁブラウザだけでデバッグまでできるんだから、
そこまで言うのは欲張りすぎかもしれません。
お手軽なことは間違いないですし。

というわけで、これでサーバサイドもデバッグできるようになりました♪