NestJS導入 デバッグ編

おはようございます！スペースマーケットの小見と申します。
NestJS導入ブログ第4回、今回はデバッグの設定について書いていきます。

今回の出来るようになること

Vscodeのデバッグ（ブレークポイント）を出来るようにして

・サーバー起動時のデバッグ
・Jestでのデバッグ

両方を目指していきます。

参考にさせていただいた記事

【NestJS】VSCodeでデバッグ実行 - 開発覚書はてな版

準備

.vscode/launch.json
ファイルに以下設定を行っていきます。

{
 "version": "0.2.0",
 "configurations": [
   {
     "type": "node",
     "request": "launch",
     "name": "Launch",
     "port": 9229,
     "runtimeExecutable": "yarn",
     "cwd": "${workspaceFolder}",
     "runtimeArgs": ["start:debug"],
     "console": "integratedTerminal",
   },
}

このファイルはvscodeデバッグ時の設定になります。
各種パラメータを把握すれば色々出来るようになるのでご興味ある方は調べてみてください。
最低限自分が把握している部分は以下になります。

runtimeExecutable
実行するコマンド（今回だとyarnコマンドを指定）

runtimeArgs
実行するコマンドの引数（今回だとstart:debug を引数を指定）
なのでコマンドライン上だと[yarn start:debug]が実行されるイメージです。

cwd
実行するディレクトリの指定
これが色々設定できてとっかかりにくいですが
今回だと${workspaceFolder}＝「現在開いているファイルのワークスペース フォルダー」となります。

Visual Studio Code Variables Reference

サーバー起動時のデバッグ

設定はこれだけでデバッグが可能です。

「F5」もしくはvscode左の虫再生マークのLaunch左の三角形を押していただくと

サーバーが起動して右上にデバッグ操作用のパレットが出てきたら起動成功です。

後はコード上に赤い点を置いていけばそこで処理が止まってくれるので変数の値や色々確認することが可能です。

Jestのデバッグ

テストをコマンドを打たずにサクッと実行したいというCLI苦手エンジニアの自分でも楽に実行できるのが「Jest Runner」

Jest Runner - Visual Studio Marketplace

インストールすると以下のように各テスト単位でRun|Debugと表示がされます。

Runをクリックするとそのテストだけを単純に実行してくれます。

Debugをクリックするとデバッグモードでテストを開始してくれてブレークポイントでデバッグが可能となります。

※デバッグ時にnodenvのバージョン指定が正しく出来ずグローバルなnodeバージョンで実行がされてしまいました。launch.jsonの設定をより細かくする必要がありそうですが今回はそこまで手が出せず申し訳ありません。

まとめ

他の言語の時もう少し設定に戸惑ったのですが、今回は設定ファイルを追加しただけですんなり行きました。

デバッグ機能はすごい便利で特定地点の変数の値が確認できるのと
このコードまでたどり着いていないのかどうか等、スグに分かります。
便利なのですが設定が面倒くさいので意外と身近で使っている人がいないので、今回を良い機会として猛プッシュしていきたいです。

最後に宣伝
今月末6月30日(水)に弊社主催のミートアップを行います！
当日はバックエンド・フロントエンド・アプリの全部門のエンジニアが登壇発表いたします。
お気軽にご参加いただける機会となっておりますので、是非是非ご参加下さい！

【Go/Rails/React/SwiftUI …】シェアリングエコノミーを支える技術 (2021/06/30 19:00〜)

これまでのNestJSリンク