NestJS を VisualStudioCode(VSCode)を使ってデバッグする方法 #Node.js

概要

バックエンドサーバーにNestJSを採用して開発を進めた際、そのデバッグの設定に少々手間取ったため、ここに備忘録として残しておきます。

環境

Windows11, WSL2

❯ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=22.04
DISTRIB_CODENAME=jammy
DISTRIB_DESCRIPTION="Ubuntu 22.04.1 LTS"

Visual Studio Code (VSCode)

Version: 1.79.2

node.js

❯ node --version
v16.17.0
❯ npm --version
8.15.0

NestJS

❯ nest --version
9.4.2

各種設定

$project_dirはNestJSプロジェクトを配置したディレクトリとして以下表記しています。

package.json の設定

まず、こちらのファイルにNestJSをDebugモードで立ち上げるためのスクリプトを設定します。
package.jsonの"scripts"要素の中に"start"や"start:dev"が既に設定されていたりすると思いますが、ここに"start:debug"という項目を下記のように追加します。

$project_dir/package.json

"start:debug": "nest start --debug --watch"

.vscode/launch.json の設定

次に、$project_dir/.vscode/launch.jsonに以下の設定を追加します。
.vscode/launch.json がない場合はファイルを作成してください。

$project_dir/.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "name": "Launch debugger",
      "request": "launch",
      "runtimeArgs": [
        "run",
        "start:debug"
      ],
      "runtimeExecutable": "npm",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "sourceMaps": true,
      "envFile": "${workspaceFolder}/.env",
      "cwd": "${workspaceRoot}",
      "console": "integratedTerminal",
      "protocol": "inspector"
    },
  ]
}

このファイルを保存してから、VSCodeのDebugアイコンをクリックすると、Launch debuggerという項目が追加されていることが確認できると思います。

この状態で、コードをブレイクさせたい場所にブレイクポイントを設定します。

ブレイクポイントを設定したら再度VSCodeのDebugアイコンをクリックし、追加された項目が選択されていることを確認して再生ボタンを押します。

するとターミナル上にVSCodeからのDebugger立ち上げコードが走ります。

Debugger attached.の文字の後にNestJSを通常起動した時のように Nest application successfully started のログが出力されたら、上記で設定したブレイクポイントを通るコードを実行してみましょう。

下記のようにコードの実行がブレイクポイントで停止すると思います。