はじめに
以前の記事で、ReactとTypeScriptのVS Codeでのデバッグ設定をまとめました。
今回はNode.jsとTypeScriptで開発する際のデバッグ方法をまとめます。
設定ファイルの生成
VS Codeの「実行とデバッグ」メニューから「launch.jsonファイルを作成します。」をクリックします。
デバッガーの選択に移るので、「Node.js」を選択します。
「.vscode」というディレクトリがルートディレクトリに生成され、「launch.json」というファイルが生成されます。
中身は以下の通りです。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "プログラムの起動",
"skipFiles": ["<node_internals>/**"],
"program": "${file}",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": ["${workspaceFolder}/dist/**/*.js"]
}
]
}
設定ファイルの構成
version
特に設定したり変更したりする必要はありません。
基本的に0.2.0が設定されています。
configurations
デバッグの設定オブジェクトを配列の形式で指定します。
配列で情報を保持しているので、複数のデバッグ設定を定義することもできます。
type
デバッガーのタイプを指定します。今回はNode.jsのデバッグを行うのでnodeが指定されています。
そのほかchrome、msedgeなど様々なタイプを指定することができます。
何が指定できるかは、以下のようにインテリセンス（contol + スペース）を使って確認できます。
request
デバッグの起動設定です。
launchとattachを指定できます。
launchはVS Codeでデバッグのプロセスを起動するもので、一般的にはこちらを設定すれば問題ないです。
attachは既に起動しているプロセスに対して接続してデバッグを実行します。
Docker環境でデバッグする場合等はこちらを使います。
name
デバッグの設定を識別するための名前です。
「デバッグと実行」メニューのプルダウンに表示されます。
skipFiles
デバッグ対象の絞り込みができます。
指定されたパターンに一致するファイルやフォルダをデバッガのステップ実行から除外します。
<node_internals>はNode.jsの組み込みモジュールを参照するための「マジックネーム」です。
環境変数とはまた別物ですが、これを指定することで、「node_modules」を除外対象にすることができます。
program
デバッガーが実行を開始するJavaScriptファイルを指定します。
「.ts」ファイルではなく、「.js」ファイルを指定するのがポイントです。
デフォルトの設定では動かないので、後ほどカスタマイズします。
ts-nodeなどを使用してTypeScriptファイルを直接実行する場合は、この限りではありません。
preLaunchTask
デバッグセッションを開始する前に実行するタスクを指定します。
ここではTypeScriptコンパイラを使用して、プロジェクトをビルドするタスクを定義しています。
なお、これは実行するタスクの名前を指定しているだけなので、後ほどタスク自体は別途作成します。
outFiles
デバッガーがソースマップを探すべき出力ファイルのパターンを指定します。
TypeScriptはJavaScriptに変換されてから実行されるため、TypeScriptの実装が、変換後のJavaScriptのどの部分と対応しているか、という情報を持っておく必要があります。
それがソースマップです。
${workspaceFolder}はVS Codeでの定義済変数で、ワークスペースフォルダのパスを表します。
dist/**/*.js は、dist ディレクトリとそのサブディレクトリにある全ての .js ファイルを指します。
この設定により、デバッガーはTypeScriptソースコードと生成されたJavaScriptコードを正確にマッピングできます。
設定ファイルのカスタマイズ
以下のように編集しました
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug TypeScript",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}/dist/index.js",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": ["${workspaceFolder}/dist/**/*.js"]
}
]
}
programに${workspaceFolder}/dist/index.jsを設定しました。
これで生成後のJavaScriptファイルをデバッガーが実行できるようになります。
他にはnameをわかりやすいように変更し、コメントを削除しています。
launch.jsonの設定は以上です。
タスクファイルの生成
launch.jsonのpreLaunchTaskに指定したタスクの設定を行います。
VS Code上で「⌘ + Shift + P」を実行します。
「Tasks:Configure Task」を入力し、「タスクの構成」を選択します。
構成するタスクの選択に移るので、「tsc: ビルド - tsconfig.json」を入力し、表示されたものを選択します。
launch.jsonと同じフォルダ階層（.vscode内）に「tasks.json」というファイルが生成されます。
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": ["$tsc"],
"group": "build",
"label": "tsc: ビルド - tsconfig.json"
}
]
}
タスクファイルのカスタマイズ
基本的にデフォルトのままで問題ありませんが、ポイントが一つだけあります。
それはlabelに指定されている値と、launch.jsonのpreLaunchTaskが一致しているかどうかを確認するということです。
ここでは、「tsc: ビルド」となっているので、先ほど設定したpreLaunchTaskに合わせて、「tsc: build」としておきます。
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": ["$tsc"],
"group": "build",
"label": "tsc: build - tsconfig.json"
}
]
}
tsconfig.jsonの設定を見直す
デバッグを正しく動かすためには、tsconfig.jsonの設定も必要です。
compilerOptions内に以下の定義が設定されているかを確認します。
{
"compilerOptions": {
// ... 他の設定 ...
"outDir": "./dist",
"rootDir": "./src",
"sourceMap": true
}
}
特に、outDirとsourceMapが正しく設定できていないと、デバッグ時のソースマップがうまくされないので、しっかり設定を確認しておく必要があります。
まとめ
Reactに続いて、TypeScriptでのデバッグ設定方法も確認しました。
こういった設定周りはしょっちゅうやるものではないので、なかなか覚えるのが難しく、またそもそも設定する機会もあまりありません。
今回は紹介していませんがDockerで動いているプログラムに対してデバッグをする際はさらに込み入った設定が必要になるので、自分の備忘も兼ねて、いつかまとめられればと思います。
これらの設定について、いつでも対応できるよう、覚えておきたいですね。