Zenn
📘

VSCodeでTypescriptのデバッグを体験してみる

2022/11/11に公開
TypeScript
VS Code
debug
tech

概要

Typescriptのデバッグを体験する。
コードはこちら

各種ファイルの役割等を調べたので共有。

.vscode/launch.jsonを作成

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch TypeScript",
      "preLaunchTask": "Compile TypeScript",
      "cwd": "${workspaceFolder}",
      "program": "${file}"
    }
  ]
}

launch.jsonとは

  • VSCodeでデバッグ実行するための設定ファイル
  • 作業ディレクトリの.vscodeディレクトリ配下に作成する
  • 公式ドキュメント

各種パラメータ

  • version
    • 不明
  • configurations
    • type
      • 起動に使用するデバッガの種類。Nodeデバッガならnode。PHPならphp。Goならgo。
    • request
      • 起動のリクエストタイプ。"launch"と"attach"がサポートされている
    • name
      • デバッグを選択する際に表示されるドロップダウンの項目名
    • preLaunchTask
      • デバッグを開始する前に起動するタスク。tasks.jsonでタスクを定義できる。
    • cwd
      • 作業ディレクトリ
    • program
      • デバッガ起動時に実行する実行ファイル名

変数の参照(${file}等)に関しては、こちら

.vscode/tasks.jsonを作成

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Compile TypeScript",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"]
    }
  ]
}

tasks.jsonとは

  • ソフトウェアシステムのリント、ビルド、パッケージング、テスト、デプロイなどのタスクの開始を設定できる。
    • ツールの多くをVS Code内から使用することができる
  • 公式ドキュメント

各種パラメータ

  • version
    • 不明
  • tasks
    • label
      • タスクのラベル
    • type
      • タスクのタイプ
    • tsconfig
      • tsconfigのパス？
    • problemMatcher

tsconfig.jsonを作成

{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./build/js/",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
  • sourceMapはtrueとする
    • jsファイルとtsファイルを紐づけるため

テスト用のファイル debug.tsを作成

const test = 1 + 2;
console.log({ test });

デバッグテスト

ブレークポイントを設置する

  • 行の左側をクリックするとブレークポイントを設置できる

デバッグの実行

  • VSCodeの左側の三角と虫のアイコンをクリック
  • 実行とデバッグより「Launch TypeScript」を選択して開始する
  • ブレークポイントで止まる

Discussion