VSCodeのデバッガーでTypeScriptのスクリプトをデバッグをする

恥ずかしながらこれまでJavaScriptの開発にデバッガーを使ってこなかった。ひたすらconsole.logを仕込みデバッグしていた。VSCodeでTypeScriptのデバッグをする方法を調べた。

とりあえずデバッガーを起動できるようになった設定ファイルはこちら。

• type
  • デバッガーの種類
  • node は組み込みのNode Debugger
• request
  • 起動設定のリクエストの種類
• name
  • 名前
• skipFiles
  • （雑な説明）デバッグ中にスキップするファイル一覧
  • <node_internals> はNode.jsの組み込みのコアモジュール
• program
  • デバッガー起動時に実行するもの
• preLaunchTask
  • デバッグセッションを始める前に実行するタスク
  • TypeScriptをJavaScriptにトランスパイルするためにnpm Scriptのbuildを指定している
• outFiles
  • VSCodeのデバッガーがTypeScriptのコードからトランスパイルされたJavaScriptを探すためのJavaScriptの出力場所
  • distディレクトリに出力している
• envFile
  • .envファイルのパス
  • ローカル環境ではdotenvで環境変数を読み込んでいるので

画像の左のペインの「Launch Program」（launch.jsonのnameに設定した値）をクリックすると、プログラムとデバッガーが実行される。元のTSファイルにブレークポイントを設定すれば、そこで処理が止まり、ローカル変数やグローバル変数の値を見ることができる。

今回はTypeScriptのシンプルなスクリプトのデバッグをした。デバッガーを起動できるようになったので一歩前進。より実践的にWebブラウザで動くJavaScriptやアプリケーションサーバーをデバッグできるようにしていきたい。