😅

NestJSの実行をVS Codeでデバッグする

2022/06/13に公開

VS Code

NestJS

tech

最初に

VS Codeでブレークポイントを設定してステップ実行するやり方を知りたかった。

やり方は分かったが、細かい理由というかより正しい設定をする方法はわからない。しかしいつかは分かるだろうし、これを読んだ誰かが正しい指摘をしてくれるかもしれないので書いておく。

TL;DR

.vscode/launch.jsonは必要
- 必要だがほとんどダミー的な記述でいい
  - 必要なのはconfigurationsとname

実例

準備

実行するサンプルとしてNestJSの typescript-starter を使う

$ git clone git@github.com:nestjs/typescript-starter.git
$ cd typescript-starter
$ nodenv local 1.8.1.0 # 私はanyenvからnodenv使ってるので
$ npm install

設定

launch.jsonを作成

$ touch .vscode/launch.json

launch.jsonに下記追加（最低限nameがあればいい）

{ 
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Dummy",
    }
  ]
}

ここでショートカットキー Cmd+Shift+d
これでデバッグのUIから設定を選べるようになる。↓

そのままだとDummyが選ばれるのでプルダウンを押下してNode.jsを探す。

Node.js押下すると次のような選択肢が出る。

手っ取り早く Run Script:startでhttp://localhost:3000でサーバが起動しブレークポイントで止まるようになってる。

その他参考にしたサイト

さまざまなサイト

Debugging NestJS in VSCode

launch.json書いてるが私の環境だとts-node/registerが見つからないというエラー。

Unknown command: "ts-node/register"

StackOverflow: Cannot debug nest js application in VSCode

ここではauto attachについて書かれてるが、auto atachするかどうかは関係なく、No need to configって書いてあった。なのでここまで述べてきたように設定を全部必要最低限にしてみた、というわけ。

引用

No need to config luanch.json..
    1. Open Vscode, and enter CTRL+SHIFT+P, select Toggle auto attach, choose always.
    2. Click the code line you want to debug
    3. npm run start
it will hit the line you want to debug

わかってないこと

公式のドキュメントでの言及
設定を書いてないのに動いてて、じゃあこれ設定ファイルにしたらどういう設定なんだろう

何か気がつく点ありましたらコメントください。