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ファイルを作成しますを選択します。デバッガーとしてWeb App (Edge)（お好みの場合はWeb App (Chrome)）を選択してlaunch.jsonファイルを作成します。

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}"
    }
  ]
}

実行とデバッグビューの構成ドロップダウンに、新しい構成Launch Edge against 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にマッピングできません。ソースマップを有効にしてプロジェクトを再ビルドしてください。

5/28/2026