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 キーを押します。 これらのツールを使用すると、DOM を調べたり、JavaScript コンソールを使ってアプリを操作したりできます。

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

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

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

  Chrome 開発者ツールまたは Microsoft Edge の F12 ツールを使用してクライアント側スクリプトをデバッグする場合、この設定を無効にしてください。

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

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

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

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

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

デバッグのためにブラウザーを準備する

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

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

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

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

2. デバッグが有効な状態でブラウザーを起動します。

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

   

   [デバッグ] ツール バーに [ブラウザーの選択] コマンドが表示されない場合は、別のブラウザーを選択してから、再試行します。

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

   

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

   別の方法として、Windows の [スタート] ボタンから [ファイル名を指定して実行] コマンドを開き (右クリックして [ファイル名を指定して実行] を選択)、次のコマンドを入力します。

   msedge --remote-debugging-port=9222

   または、

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

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

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

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

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

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

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

• 必ずブラウザーをデバッグ モードで起動します。

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

または、ソース ファイル (app.tsx など) 内のコードを中断する必要があるときに、それができない場合は、ソース ファイル内で debugger; ステートメントを使うか、代わりに Chrome の開発者ツール (または Microsoft Edge の F12 ツール) でブレークポイントを設定してみてください。

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

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

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

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

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

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

(webpack のみ) JSX ファイルの TypeScript で (トランスパイルされた JavaScript ファイルではなく) ブレークポイントを設定する場合は、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 ハンドブックの「Compiler Options」 (コンパイラ オプション) ページを確認してください。

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

関連するコンテンツ

プロパティ、React、Angular、Vue