VS Code を用いたデバッグ

Nodemon について

Nodemon はソースコードに変更があった場合にそれを検知して Node.js のアプリを再起動してくれるもの。開発中はこれを使っておけば、デバッグ作業ごとにコードを起動しなおす手間が省ける。

インストール：

npm install --global nodemon

使い方は node ./server.js などとする代わりに nodemon ./server.js とするだけ。 (package.json の中身を見てファイル名は推測されるのでたいていの場合はファイル名は省略可能)

デバッグ

VS Code で Node.js でデバッガを使う方法はいくつかあるが、最も簡単なのは自動アタッチを ON にしたうえで Node を普通に起動すること。

一番簡単な方法: 自動アタッチ

コマンドラインでデバッグ用に Node を起動したときに、その Node のプロセスに対して自動でデバッガを接続してくれるもの。

1. vscode のメニューを開いて "Debug: Toggle Auto Attach" を選び、自動アタッチを ON にする。ステータスバーに "Auto Attach: On" と出ていることを確認する。
2. 通常の vscode のターミナル上から node --inspect ./server.js のように、--inspect フラグを付けて Node.js を起動する。

特徴

• 👍 設定ファイルなどが一切要らず簡単
• 👍 コマンドラインからプログラムを起動する癖がついている人には最も楽
• 👎 Nodemon と組み合わせるのがつらい

.vscode/launch.json で Node.js を起動

.vscode/launch.json を編集することで、F5 キーを押したときにデバッグが始まるようにできる。

• 👍 F5 キーで開発中のプログラムを起動できる
• 👎 console.log などのデバッグ情報が通常のターミナルではなくデバッグコンソール側に出力されるのでちょっと扱いづらいと感じるかも

Nodemon と組み合わせる

Nodemon を使う場合は Node.js のプロセスが自動再起動を繰り返すことになるため、再起動した後の Node.js のプロセスに vscode が自動再接続できるような設定を launch.json に書く必要がある。

1. この記事を参照して launch.json を書く（すでに書かれている場合は不要）。
2. ターミナルから nodemon --inspect ./server.js する（ファイル名省略不可）。
3. ターミナル上に "Debugger listening on ws://127.0.0.1:9229/2d22d4b3-..." のようなメッセージが出ることを確認する。
4. vscode のデバッガメニューから nodemon のための設定を選択して F5 もしくは緑のデバッグ開始ボタンを押下。
5. 起動している Node.js のプロセス一覧から nodemon に対応するプロセスを選択する
6. うまくいけばターミナルに "Debugger attached" というメッセージが出る。さもなくば 5. の時点で選択を間違っている可能性があるのでやりなおし。