ChromeDevToolsDebuggingWithNodeInspector

node-inspector と npm run noded コマンドを使うと、node.js 上で動作するモジュールをブラウザの DevTools でビジュアルにデバッグできます。

node-inspector を使うと、ブレークポイントの設定や、変数の watch が可能になり、デバッグの効率が上がります。

node-inspector の使い方 も参照してください。

debugger ステートメントを追加

停止してほしい場所に debugger; を追加します。必要に応じて console.dir(object); なども追加すると良いでしょう。

function foo(param) {
    param = param || {};

    var data  = NodeModule_collectPackageData(param); // { json, tree, list }
                NodeModule_removeDevToolModules(data);
    var tree  = NodeModule_resolveDependencyTree(data);
    var files = NodeModule_createSortedFileList(data, param["develop"] ? tree["develop"]
                                                                       : tree["release"]);

debugger;
console.log("\u001b[31m" + "data: " + JSON.stringify(data, null, 2));
console.log("\u001b[33m" + "tree: " + JSON.stringify(tree, null, 2));
console.log("\u001b[32m" + "files: " + JSON.stringify(files, null, 2) + "\u001b[0m");

    return files; // { all, node, worker, browser }
}

node-inspector を起動する

ターミナルを一つ開き、$ node-inspector を実行します(このコマンドを実行したターミナルは実行中のままになります)。

$ node-inspector
> Node Inspector v0.7.3
> Visit http://127.0.0.1:8080/debug?port=5858 to start debugging.

npm run noded でデバッグを開始する

1. node-inspector を起動したまま、

2. npm run noded を実行します

   $ npm run noded

3. Chrome のタブを一つ開き、 http://127.0.0.1:8080/debug?port=5858 にアクセスします

これにより、DevTools 上で、Node.js のコードをステップ実行する環境が整います。