VSCodeでTypeScriptをデバッグする方法
VSCodeはデフォルトでTypeScriptのデバッグをサポートしています。
TypeScriptのコードをデバッグするには
- TypeScriptコンパイラの設定
- VSCodeの設定
の2つが必要です。
サンプルプロジェクト
簡単なコンソールアプリを使って手順を説明します。
コンソールにHello world!と表示するだけのプログラムです。
const message = 'Hello world!';
console.log(message);
mkdir my-project
cd my-project
npm init -y
npm i -D typescript @types/node
cat << EOF > tsconfig.json
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"rootDir": "./src",
"outDir": "./dist",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
EOF
mkdir src dist
cat << EOF > src/index.ts
const message = 'Hello world!';
console.log(message);
EOF
.
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── src
│ └── index.ts
└── tsconfig.json
TypeScriptコンパイラの設定
ソースマップファイル(.js.map)を出力するようにコンパイラの設定を変更します。ソースマップファイルにはTypeScriptコードとコンパイル後のJavaScriptコードの対応関係が記録されています。デバッガはこのファイルを使って実行中のJavaScriptコードに対応するTypeScriptコードの位置を特定します。
ソースマップファイルを出力するにはcompilerOptions.sourceMap: trueを設定します。
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"rootDir": "./src",
"sourceMap": true, // 追加する
"outDir": "./dist",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
ビルドするとJavaScriptファイルと一緒にソースマップファイル(.map)が出力されます。
npx tsc
dist
├── index.js
└── index.js.map
VSCodeの設定
.vscode/launch.jsonを作成します。
mkdir .vscode
touch .vscode/launch.json
以下を.vscode/launch.jsonに貼り付けて下さい。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/src/index.ts"
}
]
}
├── .vscode (作る)
│ └── launch.json (作る)
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── src
│ └── index.ts
└── tsconfig.json
補足:
上の手順では.vscodeフォルダとlaunch.jsonを手動で作っていますが「(デバッグビュー) > "create a launch.jcon file"」から作ることもできます。この手順で作成した場合はconfigurations.programの内容を${workspaceFolder}/src/index.tsに変更して下さい。
デバッグしてみる
デバッグに必要な設定ができたので実際に動作を確認してみましょう。
適当にブレークポイントを設定します。(行番号が出ている場所の左側をクリックするか、ブレークポイントを設定したい行をクリックしてF9を押すと設定できます)
デバッグビューを開いてセレクトボックスをクリックします。
Launch Programを選択します。
Start Debuggingをクリックします。
プログラムが起動してブレークポイントを設定した箇所で処理が止まりました。
変数の値やコーススタックなどの情報を確認できます。
まとめ
TypeScriptをVSCodeでデバッグする場合の基本的な手順を説明しました。デバッガを活用するとプログラムの動作を対話的に確認できるようになり便利です。最初は少しとっつきづらいかもしれませんが結構簡単にできますので是非試してみて下さい。
参考
Discussion