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

[アーティクル]
06/05/2023

Visual Studio を使用して、JavaScript および TypeScript のコードをデバッグすることができます。ブレークポイントにヒットさせ、変数を検査し、呼び出し履歴を表示し、その他のデバッグ機能を使用することができます。

ヒント

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロードページに移動し、無料試用版をインストールしてください。 Node.js アプリケーションを開発する場合は、Visual Studio で Node.js 開発ワークロードをインストールする必要があります。

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

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

ブレークポイントは、信頼できるデバッグの最も基本的で重要な機能です。ブレークポイントは、Visual Studio が実行コードを中断する場所を示します。これにより、変数の値またはメモリの動作を確認したり、コードの分岐が実行されるかどうかを確認したりすることができます。
アプリを実行するには、F5 キーを押します ( [デバッグ]>[デバッグの開始] )。

デバッガーは、設定したブレークポイントで一時停止します (IDE では、黄色の背景でステートメントが強調表示されます)。ここで、[ローカル] ウィンドウや [ウォッチ] ウィンドウなどのデバッガーウィンドウを使って、現在スコープ内にある変数をマウスでポイントすることにより、アプリの状態を調べることができます。
アプリを続行するには F5 キーを押します。
Chrome の開発者ツールを使う場合は、Chrome ブラウザーで F12 キーを押します。これらのツールを使用すると、DOM を調べたり、JavaScript コンソールを使ってアプリを操作したりできます。

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

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

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

詳細については、ブログ記事「Microsoft Edge での JavaScript のデバッグ」と Google Chrome に関するこちらの記事を参照してください。 ASP.NET Core での TypeScript のデバッグについては、既存の ASP.NET Core アプリへの TypeScript の追加に関する記事を参照してください。
Node.js アプリケーションとその他の JavaScript プロジェクトの場合は、ここで説明する手順に従ってください。

Note

ASP.NET と ASP.NET Core では、.CSHTML ファイル内の埋め込みスクリプトのデバッグはサポートされていません。デバッグを有効にするには、JavaScript コードを別のファイルに分ける必要があります。

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

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

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

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

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

ターゲットブラウザーのすべてのウィンドウを閉じます。

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

最良の結果を得るには、Microsoft Edge (Chromium) を使用している場合でも、Chrome のすべてのインスタンスをシャットダウンします。どちらのブラウザーも同じ Chromium コードベースを使用します。
デバッグが有効な状態でブラウザーを起動します。

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

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

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

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

msedge --remote-debugging-port=9222

または、

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

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

アプリはまだ実行されていないため、空のブラウザーページが表示されます。

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

クライアント側のコードに Visual Studio からデバッガーをアタッチしてブレークポイントをヒットさせるには、正しいプロセスを識別できるように手助けする必要があります。ここではその方法の 1 つを示します。

Visual Studio に切り替えて、JavaScript ファイル、TypeScript ファイル、JSX ファイルなどのソースコードにブレークポイントを設定します。 (return ステートメントや var 宣言など、ブレークポイントが許可されるコード行にブレークポイントを設定します)。

トランスパイルされたファイル内の特定のコードを検索するには、Ctrl+F キー ( [編集]>[検索と置換]>[クイック検索] ) を使用します。

クライアント側コードの場合、TypeScript ファイル、.vue、または JSX ファイル内のブレークポイントをヒットさせるには、通常、ソースマップを使用する必要があります。ソースマップは、Visual Studio でのデバッグをサポートするように正しく構成されている必要があります。
Visual Studio でデバッグターゲットとして目的のブラウザーを選択し、次に Ctrl+F5 キーを押して ( [デバッグ]>[デバッグなしで開始] )、ブラウザーでアプリを実行します。

フレンドリ名を使用してブラウザー構成を作成した場合は、それをデバッグターゲットとして選択します。アプリがブラウザーの新しいタブで開きます。
[デバッグ]>[プロセスにアタッチ] の順に選びます。

ヒント

Visual Studio 2017 以降では、以上の手順に従って初めてプロセスにアタッチした後は、[デバッグ]>[プロセスに再アタッチする] を選ぶことで、同じプロセスにすぐに再アタッチできます。
[プロセスにアタッチ] ダイアログで、アタッチできるブラウザーインスタンスのフィルター処理された一覧を取得します。 [アタッチ先] フィールドでターゲットブラウザー用の適切なデバッガーとして JavaScript (Chrome) または JavaScript (Microsoft Edge - Chromium) を選び、フィルターボックスに「chrome」または「edge」と入力して検索結果をフィルター処理します。
正しいホストポート (この例では localhost) のブラウザープロセスを選び、[アタッチ] を選択します。

ポート (1337 など) も [タイトル] フィールドに表示され、適切なブラウザーインスタンスを選択するのに役立ちます。

Microsoft Edge (Chromium) ブラウザーの場合の例を次に示します。

ヒント

デバッガーがアタッチされず、"デバッグアダプターを起動できませんでした" または "プロセスにアタッチできません。現在の状態での操作は無効です" というメッセージが表示される場合、ターゲットブラウザーをデバッグモードで開始する前に、Windows タスクマネージャーを使用してそのブラウザーのすべてのインスタンスを閉じます。ブラウザーの拡張機能が実行され、フルデバッグモードが阻止されている場合があります。
ブレークポイントを設定したコードは既に実行しているので、ブラウザーのページを更新します。必要に応じて、ブレークポイントを設定したコードを実行するためのアクションを実行します。

デバッガーで一時停止している間に、変数をマウスでポイントし、デバッガーウィンドウを使って、アプリの状態を確認できます。コードをステップ実行することにより (F5、F10、F11)、デバッガーを進めることができます。基本的なデバッグ機能の詳細については、デバッガーでのはじめにに関するページを参照してください。

アプリの種類、前に実行した手順、ブラウザーの状態などのその他の要素に応じて、トランスパイルされた .js ファイル内またはソースファイル内で、ブレークポイントにヒットする可能性があります。どちらの場合も、コードをステップ実行して、変数を確認できます
- TypeScript、JSX、または .vue ソースファイル内のコードへの割り込みが実行できない場合は、「トラブルシューティング」セクションにある説明に従って、環境が正しく設定されていることを確認します。
- トランスパイルされた JavaScript ファイル (app-bundle.js など) 内のコードを中断する必要があるときに、それができない場合は、ソースマップファイルである filename.js.map を削除します。

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

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 アプリの作成に関するページを参照してください。

Note

ソースマップを初めて使用する場合は、続行する前に「ソースマップとは?」をお読みください。

ソースマップの詳細設定を構成するには、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: '[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」 (コンパイラオプション) ページを確認してください。

プロジェクト設定を使用してソースマップを構成する (TypeScript プロジェクト)

プロジェクトを右クリックし、[プロジェクト] > [プロパティ] > [TypeScript ビルド] > [デバッグ] を選ぶことで、プロジェクトプロパティを使用してソースマップ設定を構成することもできます。

以下のプロジェクト設定を使用できます。

ソースマップを生成する (tsconfig.json の sourceMap と同等): 対応する .map ファイルを生成します。
ソースマップのルートディレクトリを指定する (tsconfig.json の mapRoot と同等):生成された場所ではなく、デバッガーでマップファイルを検索する必要がある場所を指定します。実行時の .map ファイルを、.js ファイルとは異なる場所に配置する必要がある場合は、このフラグを使用します。指定された場所は、マップファイルが配置されている場所にデバッガーを移動するために、ソースマップに埋め込まれます。
TypeScript ファイルのルートディレクトリを指定する (tsconfig.json の sourceRoot と同等):ソースの場所ではなく、デバッガーで TypeScript ファイルを検索する必要がある場所を指定します。実行時のソースファイルを、設計時の場所とは異なる場所に配置する必要がある場合は、このフラグを使用します。指定された場所は、ソースファイルが配置されている場所にデバッガーを移動するために、ソースマップに埋め込まれます。

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

Visual Studio 2019 以降、Visual Studio では Chrome および Microsoft Edge (Chromium) のみのデバッグサポートが提供されます。

ただし、Razor 構文 (cshtml、vbhtml) で生成されたファイルのブレークポイントに自動的にヒットさせることはできません。この種のファイルのデバッグに使用できる方法は、次の 2 つです。

中断する場所に debugger; ステートメントを配置する: このステートメントにより、動的スクリプトで実行が停止され、作成中にすぐにデバッグが開始されます。
Visual Studio でページを読み込み、動的なドキュメントを開く:デバッグ中に動的ファイルを開き、ブレークポイントを設定し、この方法が機能するようにページを更新する必要があります。 Chrome と Microsoft Edge (Chromium) のどちらを使用するかに応じて、次の方法のいずれかを使ってファイルを見つけます。
- Chrome の場合は、[ソリューションエクスプローラー] > [スクリプトドキュメント] > [YourPageName] に移動します。
  
  Note
  
  Chrome を使用する場合、"<script> タグ間に使用できるソースがない" という内容のメッセージが表示される場合があります。これは問題ありませんので、デバッグを続けることができます。
- Microsoft Edge (Chromium) の場合は、Chrome と同じ手順を使用します。

詳細については、「Client-side debugging of ASP.NET projects in Google Chrome」 (Google Chrome での ASP.NET プロジェクトのクライアント側デバッグ) をご覧ください。

プロパティ、React、Angular、Vue

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

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

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

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

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

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

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

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

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

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

プロジェクト設定を使用してソースマップを構成する (TypeScript プロジェクト)

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

フィードバック

フィードバック

その他のリソース

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

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

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

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

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

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

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

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

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

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

プロジェクト設定を使用してソース マップを構成する (TypeScript プロジェクト)

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

関連するコンテンツ

フィードバック

フィードバック

その他のリソース

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

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

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

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

プロジェクト設定を使用してソースマップを構成する (TypeScript プロジェクト)