編集

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)) に移動し、[create a launch.json file] リンクを選択します。

これにより、.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)) で、[create a launch.json file] を選択して launch.json ファイルを作成し、デバッガーとして [Web アプリ (Edge)] を選択するか、必要に応じて [Web アプリ (Chrome)] を選択します。

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

{
  "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 にマップできていません。ソースマップを有効にして、プロジェクトを再ビルドしてください。

08/07/2025