はじめに
VSCodeでTypeScriptをデバッグしたい時、割と環境構築が面倒だったりしませんか？ts-nodeを使えば簡単にデバッグできるようになるので、今回はそのやり方をご紹介します。
手順
※プロジェクトディレクトリは作成済みとします
①npmを初期化
npm init
②TypeScriptをインストール
npm install typescript @types/node@14
※「14」の部分はお使いのNode.jsのバージョンに合わせてください
③ts-nodeをインストール
npm install ts-node
④launch.jsonにエントリポイントを追加
launch.json
"args": [
"${workspaceFolder}/src/index.ts"
]
⑤launch.jsonに下記設定を追加
launch.json
"runtimeArgs": [
"-r",
"ts-node/register"
]
launch.json全体ではこんな感じです
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"runtimeArgs": [
"-r",
"ts-node/register"
],
"skipFiles": [
"<node_internals>/**"
],
"args": [
"${workspaceFolder}/src/index.ts"
]
}
]
}
以上で設定は完了です。シンプルでしょ？
動作確認
プロジェクトディレクトリ直下にsrcディレクトリを作成し、下記のファイルを配置します
index.ts
import {testClass} from "./test";
const test = new testClass();
test.testFunction();
test.ts
export class testClass {
testFunction() {
console.log("testFunction has called");
}
}
エントリポイントであるindex.tsでtestFunctionを呼び出すだけですね
最後に、好きな箇所にブレークポイントをセットしてデバッグ画面で先程作成したlaunch.jsonを選択し、実行ボタンをクリックします
まずtestFunctionの呼び出し元がヒットし
次にtestFunctionの内部がヒットすることを確認できました
今回は以上です。
↧