ChromeDevToolsDebuggingWithNodeInspector

npm run noded コマンドと、node-inspector を使い、Chrome の DevTools 上で、 node.js 上で動作する WebModule のコードをデバッグする方法について説明します。
使い慣れた DevTools でステップ実行を行ったり、ブレークポイントの設定や 変数の watch が可能になります。

こちらも参照してください

停止してほしい箇所に debugger ステートメントを追加

lib/*.js のデバッグを行いたい箇所に debugger; を追加します。必要に応じて console.log なども追加します。

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 のコードをステップ実行する環境が整います。