VS Codeのエージェントモードを拡張するには、を試してください！

TypeScript のデバッグ

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

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

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

インラインソースマップ (コンテンツが別のファイルではなくデータ URL として保存されるソースマップ) もサポートされていますが、インラインソース自体はまだサポートされていません。

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

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

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

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

{
  // 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 のグロブパターンで指定されたファイルを検索して、生成されたソースを見つけようとします。

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

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

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

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

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)) で、デバッガーとしてWeb アプリ (Edge)、または好みであればWeb アプリ (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}"
    }
  ]
}

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

client-side debug breakpoint

よくある質問

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

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

07/09/2025