🐈

Visual Studio CodeでTypeScriptのデバッグを行う方法

に公開
Docker
TypeScript
VS Code
tech

はじめに

本記事では、Visual Studio Code（VS Code）を使用してTypeScriptのデバッグを行う方法を紹介します。特に、docker-composeを使用してnginxコンテナ上で動作する環境で、VS CodeからChromeを起動し、TypeScriptファイルにブレークポイントを設定してデバッグする手順を詳しく説明します。

フォルダ構成

以下のようなフォルダ構成でプロジェクトを構築しました。

.
├── docker-compose.yaml
├── nginx
│   ├── Makefile
│   ├── conf.d
│   │   └── server.conf
│   ├── html
│   │   ├── css
│   │   │   └── style.css
│   │   ├── index.bak.html
│   │   ├── index.html
│   │   └── js
│   │       ├── index.js
│   │       └── index.js.map
│   └── ts
│       └── index.ts
├── package.json
└── tsconfig.json

TypeScriptのコード（index.ts）をtscでコンパイルし、JavaScriptファイル（index.js）としてnginx/html/jsフォルダに出力する構成になっています。

TypeScriptのコンパイル設定（tsconfig.json）

TypeScriptのコンパイルを適切に行うために、以下のようなtsconfig.jsonを設定しました。

{
  "compilerOptions": {
    "rootDirs": ["./nginx/ts"],
    "sourceMap": true,
    "outDir": "./nginx/html/js"
  }
}

  • rootDirs: TypeScriptファイルのルートディレクトリを指定。

  • sourceMap: true に設定することで、デバッグ時にTypeScriptのソースマップが生成され、ブラウザでTypeScriptの元のコードを確認できるようになります。

  • outDir: JavaScriptファイルの出力先を指定。

VS Codeのデバッグ設定（launch.json）

VS CodeからChromeを起動し、TypeScriptファイルにブレークポイントを設定できるようにするために、以下のlaunch.jsonを設定しました。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "name": "TS Debug",
      "request": "launch",
      "url": "http://localhost",
      "webRoot": "${workspaceFolder}/nginx/html",
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/nginx/html/js/*.js"]
    }
  ]
}

設定のポイント

  • type: chrome に設定し、Chromeブラウザをデバッグ用に起動。

  • name: デバッグ設定の名前。

  • request: launch を指定し、デバッグ時にChromeを起動。

  • url: http://localhost にアクセス。

  • webRoot: nginx/html をデバッグ時のWebルートディレクトリに指定。

  • sourceMaps: true に設定することで、TypeScriptの元コードにブレークポイントを設定可能。

  • outFiles: デバッグ対象のJavaScriptファイルを指定。

デバッグの手順

  1. tscを実行し、TypeScriptをコンパイル。

  2. docker-compose up でnginxコンテナを起動。

  3. VS Codeのデバッグメニューから「TS Debug」を選択し、デバッグ開始。

  4. Chromeが起動し、http://localhost にアクセス。

  5. VS CodeでTypeScriptファイルにブレークポイントを設定すると、デバッグが開始される。

まとめ

本記事では、VS Codeを使用してTypeScriptのデバッグを行う方法を紹介しました。tsconfig.json と launch.json の設定を適切に行うことで、nginxコンテナ上で動作するTypeScriptアプリケーションをスムーズにデバッグできます。

Discussion