TypeScript のデバッグ

Visual Studio Code は、組み込みの Node.js デバッガーおよび Edge および Chrome デバッガーを介して TypeScript のデバッグをサポートしています。

JavaScript ソースマップのサポート

TypeScript のデバッグは JavaScript のソースマップをサポートしています。TypeScript ファイルのソースマップを生成するには、--sourcemap オプションを指定してコンパイルするか、tsconfig.json ファイルの sourceMap プロパティを true に設定します。

インラインソースマップ（コンテンツが個別のファイルではなくデータ URL として格納されるソースマップ）もサポートされていますが、インラインソースはまだサポートされていません。

ソースマップの簡単な動作例については、TypeScript チュートリアルを参照してください。ここでは、次の tsconfig.json および VS Code のデフォルト Node.js デバッグ構成を使用して、簡単な「Hello World」Node.js アプリケーションをデバッグする方法を示しています。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

より高度なデバッグシナリオでは、独自のデバッグ構成 launch.json ファイルを作成できます。デフォルトの構成を表示するには、実行とデバッグ ビュー (⇧⌘D (Windows、Linux Ctrl+Shift+D)) に移動し、launch.json ファイルを作成する リンクを選択します。

これにより、プロジェクトで検出されたデフォルト値を含む .vscode フォルダーに launch.json ファイルが作成されます。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/helloworld.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/out/**/*.js"]
    }
  ]
}

VS Code は、起動するプログラム helloworld.ts を決定し、ビルドを preLaunchTask として含め、生成された JavaScript ファイルの場所をデバッガーに伝えました。

launch.json には、他のデバッグ構成オプションについて学習するのに役立つ提案と情報を含む完全な IntelliSense があります。右下の 構成の追加 ボタンを使用して、launch.json に新しいデバッグ構成を追加することもできます。

launch.json IntelliSense

例と詳細な説明については、Node.js デバッグも参照してください。

出力場所のマッピング

生成された（トランスパイルされた）JavaScript ファイルがソースの隣にない場合は、起動構成で outFiles 属性を設定することにより、VS Code デバッガーがそれらを見つけるのを助けることができます。元のソースにブレークポイントを設定すると、VS Code は outFiles の glob パターンで指定されたファイルを検索して、生成されたソースを見つけようとします。

クライアントサイドのデバッグ

TypeScript は、Node.js アプリケーションだけでなく、クライアントサイドコードの作成にも最適であり、組み込みの Edge および Chrome デバッガーを使用してクライアントサイドのソースコードをデバッグできます。

クライアントサイドのデバッグの動作を示す小さな Web アプリケーションを作成します。

新しいフォルダー HelloWeb を作成し、次のコンテンツで 3 つのファイル helloweb.ts、helloweb.html、および tsconfig.json を追加します。

helloweb.ts

let message: string = 'Hello Web';
document.body.innerHTML = message;

helloweb.html

<!DOCTYPE html>
<html>
    <head><title>TypeScript Hello Web</title></head>
    <body>
        <script src="out/helloweb.js"></script>
    </body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

tsc を実行してアプリをビルドし、ブラウザで helloweb.html を開いてテストします（ファイルエクスプローラーで helloweb.html を右クリックし、パスをコピー を選択してブラウザに貼り付けることができます）。

実行とデバッグビュー (⇧⌘D (Windows、Linux Ctrl+Shift+D)) で、launch.json ファイルを作成する を選択して launch.json ファイルを作成し、デバッガーとして Web アプリ (Edge) を選択するか、必要に応じて Web アプリ (Chrome) を選択します。

launch.json を更新して、helloweb.html へのローカルファイル URL を指定します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "file:///C:/Users/username/HelloWeb/helloweb.html",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

実行とデバッグ ビューの構成ドロップダウンに、新しい構成 Edge を localhost に対して起動 が表示されるようになります。その構成を実行すると、Web ページとともにブラウザが起動します。エディターで helloweb.ts を開き、左側のガターをクリックしてブレークポイントを追加します（赤い円として表示されます）。F5 を押してデバッグセッションを開始すると、ブラウザが起動し、helloweb.ts のブレークポイントにヒットします。

client-side debug breakpoint

よくある質問

対応する JavaScript が見つからないため、プログラムを起動できません

tsconfig.json で "sourceMap": true を設定していないか、launch.json で outFiles を設定していない可能性があり、VS Code Node.js デバッガーは TypeScript ソースコードを実行中の JavaScript にマップできません。ソースマップをオンにして、プロジェクトをリビルドしてください。

04/03/2025