Visual Studio で JavaScript または TypeScript アプリをデバッグする

Visual Studio を使用して JavaScript と TypeScript コードをデバッグできます。 ブレークポイントにヒットしたり、デバッガーをアタッチしたり、変数を検査したり、呼び出し履歴を表示したり、他のデバッグ機能を使用したりできます。

サーバー側スクリプトのデバッグ

1. Visual Studio でプロジェクトを開いた状態で、サーバー側の JavaScript ファイル (server.jsなど) を開き、余白をクリックしてブレークポイントを設定します。

   

   ブレークポイントは、信頼性の高いデバッグの最も基本的で不可欠な機能です。 ブレークポイントは、Visual Studio で実行中のコードを中断する場所を示します。そのため、変数の値やメモリの動作、またはコードの分岐が実行されているかどうかを確認できます。

2. アプリを実行するには、F5（[デバッグ>デバッグの開始]）を押します。

   デバッガーは、設定したブレークポイントで一時停止します (IDE では、黄色の背景でステートメントが強調表示されます)。 これで、現在スコープ内の変数にマウス ポインターを合わせ、デバッガー ウィンドウ (ローカル やウォッチ ウィンドウなど) を使用して、アプリの状態 調べることができます。

   

3. F5 押してアプリを続行します。

4. Chrome 開発者ツールを使用する場合は、Chrome ブラウザー F12 を押します。 これらのツールを使用すると、JAVAScript コンソールを使用して DOM を調べたり、アプリと対話したりできます。

クライアント側スクリプトのデバッグ

Visual Studio では、Chrome と Microsoft Edge に対してのみクライアント側デバッグのサポートが提供されます。 一部のシナリオでは、デバッガーは JavaScript と TypeScript コードのブレークポイントと HTML ファイルの埋め込みスクリプトに自動的にヒットします。

• ASP.NET アプリでクライアント側スクリプトをデバッグする場合は、[ツール] >[オプション]>[デバッグ]、[ ASP.NET (Chrome、Edge、IE)の JavaScript デバッグを有効にする] を選択します。

  Chrome Developer Tools または F12 Tools for Microsoft Edge を使用してクライアント側スクリプトをデバッグする場合は、この設定を無効にする必要があります。

  詳細については、Google Chrome のこのブログ記事を参照してください。 ASP.NET Core での TypeScript のデバッグについては、「既存の ASP.NET Core アプリに TypeScript を追加する」を参照してください。

• Node.js アプリケーションとその他の JavaScript プロジェクトについては、この記事で説明する手順に従ってください。

デバッグ用にアプリを準備する

ソースが TypeScript や Babel などのトランスパイラーによって縮小または作成される場合は、ソース マップ を使用して、最適なデバッグ エクスペリエンスを実現します。 ソース マップを使用せずに、実行中のクライアント側スクリプトにデバッガーをアタッチすることもできます。 ただし、ソース ファイルではなく、縮小またはトランスパイルされたファイルでのみブレークポイントを設定およびヒットできる場合があります。 たとえば、Vue.js アプリでは、縮小されたスクリプトは文字列として eval ステートメントに渡されます。ソース マップを使用しない限り、Visual Studio デバッガーを効果的に使用してこのコードをステップ 実行する方法はありません。 複雑なデバッグ シナリオでは、代わりに Chrome Developer Tools または F12 Tools for Microsoft Edge を使用できます。

ソース マップの生成に関するヘルプについては、「デバッグ用のソース マップの生成」参照してください。

デバッグ用にブラウザーを準備する

このシナリオでは、Microsoft Edge または Chrome を使用します。

1. ターゲット ブラウザー (Microsoft Edge または Chrome インスタンス) のすべてのウィンドウを閉じます。

   他のブラウザー インスタンスでは、デバッグを有効にしてブラウザーを開くことができない可能性があります。 (ブラウザー拡張機能が実行されていて、完全デバッグ モードをインターセプトしている可能性があるため、Chrome または Edge の予期しないインスタンスを見つけて閉じるには、タスク マネージャーを開く必要がある場合があります)。

   最良の結果を得るには、Microsoft Edge を使用している場合でも、Chrome のすべてのインスタンスをシャットダウンします。 どちらのブラウザーも同じ Chromium コード ベースを使用します。

2. デバッグを有効にしてブラウザーを起動します。

   Visual Studio 2019以降では、デバッグ ツールバーから「ブラウズ方法」>を選択することで、ブラウザーの起動時に--remote-debugging-port=9222 フラグを設定することができます。

   

   デバッグ ツール バーに Browse With... コマンドが表示されない場合は、別のブラウザーを選択してから、やり直してください。

   [ブラウザーの選択] ダイアログ ボックスで [追加] を選択し、[引数] フィールドでフラグを設定します。 Edge デバッグ モードの や Chrome デバッグ モード など、ブラウザーに別のフレンドリ名を使用します。 詳細については、リリース ノートのを参照してください。

   

   [参照] を選択して、ブラウザーを使用してデバッグ モードでアプリを起動します。

   または、Windows の [ の開始] ボタンから コマンドを開き (右クリックして [実行]選択)、次のコマンドを入力します。

   msedge --remote-debugging-port=9222

   または、

   chrome.exe --remote-debugging-port=9222

   これにより、デバッグが有効な状態でブラウザーが起動します。

   アプリはまだ実行されていないため、空のブラウザー ページが表示されます。 (Run コマンドを使用してブラウザーを起動する場合は、アプリ インスタンスの正しい URL を貼り付ける必要があります)。

クライアント側スクリプトにデバッガーをアタッチする

ブレークポイントとソース マップのトラブルシューティング

TypeScript または JSX ソースファイルのコードに入り込む必要があり、それができない場合は、前のセクションで説明したように、プロセスに接続 を使用してデバッガーをアタッチしてください。 環境が正しく設定されていることを確認します。

• デバッグ モードでブラウザーを実行できるように、Chrome 拡張機能 (タスク マネージャーを使用) を含むすべてのブラウザー インスタンスを閉じます。

• 必ずデバッグモード でブラウザを起動してください。

• ソース マップ ファイルにソース ファイルへの正しい相対パスが含まれていること、およびサポートされていないプレフィックス (webpack:///など) が含まれていないことを確認します。これにより、Visual Studio デバッガーでソース ファイルが見つかりません。 たとえば、webpack:///.app.tsx のような参照は、./app.tsx をするように修正できます。 これは、ソース マップ ファイル (テストに役立ちます) またはカスタム ビルド構成で手動で行うことができます。 詳細については、「デバッグ用のソース マップの生成」を参照してください。

または、ソース ファイル (たとえば、app.tsx ) でコードを分割する必要があり、実行できない場合は、ソース ファイルで debugger; ステートメントを使用するか、代わりに Chrome 開発者ツール (または F12 Tools for Microsoft Edge) でブレークポイントを設定してください。

デバッグ用のソース マップを生成する

Visual Studio には、JavaScript ソース ファイルでソース マップを使用および生成する機能があります。 これは多くの場合、ソースが TypeScript や Babel などのトランスパイラーによって縮小または作成される場合に必要になります。 使用可能なオプションは、プロジェクトの種類によって異なります。

• Visual Studio の TypeScript プロジェクトでは、既定でソース マップが生成されます。 詳細については、「tsconfig.json ファイルを使用してソース マップを構成する」を参照してください。

• JavaScript プロジェクトでは、webpack などのバンドルと、プロジェクトに追加できる TypeScript コンパイラ (または Babel) などのコンパイラを使用してソース マップを生成できます。 TypeScript コンパイラの場合は、tsconfig.json ファイルを追加し、sourceMap コンパイラ オプションを設定する必要もあります。 基本的な Webpack 構成を使用してこれを行う方法を示す例については、「React を使用して Node.js アプリを作成する」を参照してください。

ソース マップの詳細設定を構成するには、TypeScript プロジェクトで tsconfig.json またはプロジェクト設定を使用しますが、両方を使用することはできません。

Visual Studio を使用してデバッグを有効にするには、生成されたソース マップ内のソース ファイルへの参照が正しいことを確認する必要があります (テストが必要になる場合があります)。 たとえば、webpack を使用している場合、ソース マップ ファイル内の参照には webpack:/// プレフィックスが含まれています。これにより、Visual Studio で TypeScript または JSX ソース ファイルが見つかりません。 具体的には、デバッグ目的でこれを修正する場合、ソース ファイル (app.tsxなど) への参照を webpack:///./app.tsx のようなものから、デバッグを有効にする ./app.tsxなどに変更する必要があります (パスはソース ファイルからの相対パスです)。 次の例は、Visual Studio で動作するように、最も一般的なバンドルの 1 つである webpack でソース マップを構成する方法を示しています。

(Webpack のみ)(トランスパイルされた JavaScript ファイルではなく) JSX ファイルの TypeScript にブレークポイントを設定する場合は、webpack 構成を更新する必要があります。 たとえば、webpack-config.jsでは、次のコードを置き換える必要がある場合があります。

  output: {
    filename: "./app-bundle.js", // This is an example of the filename in your project
  },

次のコードを使用します。

  output: {
    filename: "./app-bundle.js", // Replace with the filename in your project
    devtoolModuleFilenameTemplate: '[absolute-resource-path]'  // Removes the webpack:/// prefix
  },

これは、Visual Studio でクライアント側コードのデバッグを有効にする開発専用の設定です。

複雑なシナリオでは、ブラウザー ツール (F12) は、カスタム プレフィックスを変更する必要がないため、デバッグに最適な場合があります。

tsconfig.json ファイルを使用してソース マップを構成する

tsconfig.json ファイルをプロジェクトに追加すると、Visual Studio はディレクトリ ルートを TypeScript プロジェクトとして扱います。 ファイルを追加するには、ソリューション エクスプローラーでプロジェクトを右クリックし、[> 新しい項目の追加] > TypeScript JSON 構成ファイル 選択します。 次のような tsconfig.json ファイルがプロジェクトに追加されます。

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

tsconfig.json ファイルのコンパイラ オプション

• inlineSourceMap: ソース ファイルごとに個別のソース マップを作成するのではなく、ソース マップを含む 1 つのファイルを出力します。
• inlineSources: ソースマップと共にソースを1つのファイル内で生成します。inlineSourceMap または sourceMap を設定する必要があります。
• mapRoot: デバッガーが既定の場所ではなく、ソース マップ (.map) ファイルを検索する場所を指定します。 実行時 .map ファイルが .js ファイルとは異なる場所にある必要がある場合は、このフラグを使用します。 指定された場所は、デバッガーを .map ファイルの場所に移動するために、ソース マップに埋め込まれます。
• sourceMap: 対応する .map ファイルを生成します。
• sourceRoot: デバッガーがソースの場所ではなく TypeScript ファイルを検索する場所を指定します。 実行時ソースがデザイン時の場所とは異なる場所にある必要がある場合は、このフラグを使用します。 指定された場所は、ソース ファイルが配置されている場所にデバッガーを誘導するために、ソース マップに埋め込まれます。

コンパイラ オプションの詳細については、「TypeScript ハンドブック」の「コンパイラ オプション」 ページを参照してください。

Razor を使用して動的ファイル内の JavaScript をデバッグする (ASP.NET)

関連コンテンツ

プロパティ、React、Angular、Vue