WebStorm で ts-node を用いたデバッグ環境の構築

はじめに

TypeScript の開発では ts-node を用いることでコンパイルせずにそのまま実行できます。
Node.js のアプリケーションでは --inspect を付与して起動することでデバッグ実行が可能になります。
ここでは、 WebStorm 上で ts-node を経由したアプリケーションでの設定をまとめます。

ts-node がプロジェクトにインストールされている前提で話を進めます。

環境

• WebStorm 2019.2.3

Node.js

メインメニューの Run - Edit Configrations から Node.js の設定を追加します。
Node parameters に --require ts-node/register を追加します。
現行のバージョンでは --inspect を指定しなくても動作するようです。
ts-node の CLI オプションを付与したい場合は、ts-node の環境変数を Environment variables に追加することで有効になります。

実際にブレークポイントを設定して実行すると停止することが分かります。

Jest

Jest を用いたテストでもデバッグできます。
Jest の設定を追加します。
Node options に --require ts-node/register を追加します。

テストファイル上でブレークポイントを設定して実行すると停止することが分かります。プロダクションコードにブレークポイントを設定しても同様に停止します。

nodemon

nodemon はソースコードの変更を検知してリロードしてくれるツールです。
WebStorm ではリロードした際にも再接続してデバッグが続行できるようになっています。
nodemon がプロジェクトにインストールされている前提で話を進めます。

nodemon 起動時の設定を以下のように nodemon.json に記載します。

nodemon.json

{
  "watch": ["src"],
  "ext": "ts",
  "exec": "node --inspect --require ts-node/register src/app.ts"
}

以下のように npm scripts で nodemon が起動するコマンドを追加します。

package.json

"scripts": {
  "dev": "nodemon"
}

追加したコマンドで nodemon を起動しておきます。

$ npm run dev

Attach to a Node.js/Chrome の設定を追加します。
Reconnect automatically にチェックを入れます。

この状態で実行するとソースコードを修正しても再接続されデバッグできます。

参考

Running and Debugging Node.js - Help | WebStorm
ts-node を WebStorm でデバッグ実行 - Qiita