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

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

ヒント

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。

デバッグを構成する

Visual Studio 2022 の .esproj プロジェクトの場合、Visual Studio Code は launch.json ファイルを使用してデバッガーを構成およびカスタマイズします。 launch.json はデバッガー構成ファイルです。

Visual Studio では、デバッガーはユーザー コードにのみアタッチされます。 .esproj プロジェクトでは、launch.jsonのskipFiles設定を使用して、Visual Studio でユーザー コード (Just My Code 設定とも呼ばれます) を構成できます。 これは、VS Code の launch.json 設定と同じように動作します。 skipFilesおよびその他のデバッガー構成オプションの詳細については、「Skipping Uninteresting Code および Launch 構成属性を参照してください。

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

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 プロジェクトの場合は、ここで説明する手順に従ってください。

Note

ASP.NET と ASP.NET Core では、.CSHTML ファイル内の埋め込みスクリプトのデバッグはサポートされていません。 デバッグを有効にするには、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 を貼り付ける必要があります)。

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

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

1. 前のセクションで説明したように、アプリがデバッグ モードのブラウザーで実行されていることを確認します。

   フレンドリ名を使用してブラウザー構成を作成した場合、それをデバッグ ターゲットとして選択した後、Ctrl+F5 キー ([デバッグ]>[デバッグなしで開始]) を押して、ブラウザーでアプリを実行します。

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

   

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

   クライアント側コードの場合、TypeScript ファイル、.vue、または JSX ファイル内のブレークポイントをヒットさせるには、通常、ソース マップを使用する必要があります。 ソース マップは、Visual Studio でのデバッグをサポートするように正しく構成されている必要があります。

3. [デバッグ]>[プロセスにアタッチ] の順に選びます。

   ヒント

   Visual Studio 2017 以降では、以上の手順に従って初めてプロセスにアタッチした後は、[デバッグ]>[プロセスに再アタッチする] を選ぶことで、同じプロセスにすぐに再アタッチできます。

4. [プロセスにアタッチ] ダイアログで、[接続の種類] として JavaScript および TypeScript (Chrome 開発者ツール/V8 インスペクター) を選択します。

   http://localhost:9222 などのデバッガー ターゲットが、"接続先" フィールドに表示されます。

5. ブラウザー インスタンスの一覧で、正しいホスト ポート (この例では https://localhost:7184/) を含むブラウザー プロセスを選択し、[アタッチ] を選択します。

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

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

   

   ヒント

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

6. ブレークポイントを設定したコードは既に実行しているので、ブラウザーのページを更新します。 必要に応じて、ブレークポイントを設定したコードを実行するためのアクションを実行します。

   デバッガーで一時停止している間に、変数をマウスでポイントし、デバッガー ウィンドウを使って、アプリの状態を確認できます。 コードをステップ実行することにより (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: '[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 をデバッグする

Visual Studio 2022 では、ブレークポイントを使用して Razor ページをデバッグすることができます。 詳細については、「Visual Studio でのデバッグ ツールの使用」を参照してください。

関連するコンテンツ

プロパティ、React、Angular、Vue