ChromeDevToolsDebuggingWithNodeInspector

node-inspector を使い、Chrome の DevTools 上で、 node.js 上で動作する WebModule のコードをリモートデバッグする方法について説明します。

例として $ npm run test-page で動作する NodeModule.js をデバッグします。

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

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

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

function NodeModule_files(param) { // @arg Object # { dir, ignore, develop, packageFiles }
                                   //   param.dir - PathString(= ""): search path.
                                   //   param.ignore - ModuleNameArray(= []): ["uupaa.watch.js", ...]
                                   //   param.develop - Boolean(= false): true is search develop information.
                                   //   param.packageFiles - Object(= null): package.json files for debug.
                                   // @ret Object # { all, node, worker, browser, labels }
                                   //   return.all - RelativeFilePathArray: all
                                   //   return.node - RelativeFilePathArray: for Node.js
                                   //   return.worker - RelativeFilePathArray: for WebWorker
                                   //   return.browser - RelativeFilePathArray: for Browser
                                   //   return.labels - PathStringArray: labels.
    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 }
}

--debug-brk を追加

package.json を修正し、 npm run test-page で走るコマンドに --debug-brk を追加します。

--debug-brk を伴って node.js を起動すると、DevTools が最初の行で自動的に一時停止するようになります。
(DevTools 起動時に停止させる必要がない場合は、この修正は不要です)

"scripts": {
- "test-page":    "node node_modules/uupaa.test.js/bin/TestPage.js --verbose",
+ "test-page":    "node --debug-brk node_modules/uupaa.test.js/bin/TestPage.js --verbose",
}

node-inspector を起動する

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

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

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

npm run test-page を実行し、デバッグを開始する

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

2. ブラウザで http://127.0.0.1:8080/debug?port=5858 にアクセスし、

3. npm run test-page を実行する

   $ npm run test-page 

これにより、DevTools 上で、Node.js のコードをデバッグする環境が整います。