Node.jsアプリケーションを、Google ChromeのDevToolsでデバッグする

const http = require("http");

const port = 8080;

const logger = fun => console.log(`[${new Date()}] ${fun.call(null)}`);

const server = http.createServer((request, response) => {
    request.setEncoding("utf-8");
    
    request.on("data", chunk => {
        logger(() => `received data[${chunk}]`);

        const data = JSON.parse(chunk);

        const operator = data["operator"];
        const a = data["a"];
        const b = data["b"];

        const responseSender = d => response.end(JSON.stringify(d));

        if (operator === "+") {
            responseSender({ result: a + b});
        } else if (operator === "-") {
            responseSender({ result: a - b});
        } else if (operator === "*") {
            responseSender({ result: a * b});
        } else if (operator === "/") {
            responseSender({ result: a / b});
        } else {
            logger(() => "Bad Request");
            response.statusCode = 400;
            responseSender({ message: `Unknown Operator[${operator}]` });
        }
    });
});

server.on("request", (request, response) => {
    const socket = request.socket;
    logger(() => `client connected[${socket.remoteAddress}:${socket.remotePort}] URL[${request.url} ${request.httpVersion}] Method[${request.method}]`);
});

server.listen(port);

logger(() => "Server startup");

/*
server.close();
logger(() => "Server shutdown");
*/

確認

通常であれば

$ node server.js

と起動するところを、「--inspect」オプションを付けて起動します。

$ node --inspect server.js

すると、こんな表示が出るので

Debugger listening on ws://127.0.0.1:9229/3d9b75ec-6919-4cc9-a7de-0c59ad86be91
For help see https://nodejs.org/en/docs/inspector

この時にGoogle Chromeに「chrome://inspect」でアクセスします。

すると、デバッグ可能なNode.jsのプロセスが選択できるようになるので

「insepect」を選択すると、Google Chromeで見慣れた開発者ツールが起動します。

あとは、こちらを使ってデバッグすればOKです。

また、「--inspect」オプションの代わりに、「--inspect-brk」を使用すると、スクリプトの最初にブレークポイントが設定された状態で停止します。

$ node --inspect-brk server.js

ケースバイケースで使っていきましょう。

また、「chrome://inspect」から開くのが面倒な場合は、「NIM」というGoogle Chrome拡張を入れると良いみたいです。
Node.js V8 --inspector Manager (NiM) - Chrome Web Store

「--inspect」または「--inspect-brk」オプションを使用してNode.jsアプリケーションを起動すると、自動的にGoogle Chromeの開発者ツールを
該当のアプリケーションを開いた状態で起動してくれるようになります。

便利そうなので、それぞれ使っていきましょう。

また、テスティングフレームワークを介した場合はそれぞれデバッグ方法が記載されているようなので、見ておくとよいでしょう。

Jestは、ズバリこれですね。
Troubleshooting

https://github.com/avajs/ava/blob/master/docs/recipes/debugging-with-chrome-devtools.md

参考）
Node.jsをChromeで快適デバッグ

ChromeDevToolを使ってNodeJSのデバッグ

CLOVER🍀

That was when it all began.

Node.jsアプリケーションを、Google ChromeのDevToolsでデバッグする

環境

確認