Visual StudioでJavaScriptのプログラムをデバッグする

設定手順

JavaScriptのデバッグを有効化する

１．Visual Studioを開き、ツール > オプションを押下します

２．デバッグの中から、「ASP.NET の JavaScript のデバッグを有効にする (Chrome、Edge、IE)」をチェックします

３．OKボタン押下で閉じます

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

１．デバッグターゲット > ブラウザーの選択を押下します

２．追加を押下します

３．以下の通り入力し、OKボタンを押下します
プログラム：実行に使用したいブラウザのアプリケーションパス
引数：--remote-debugging-port=任意のポート
表示名：任意の名前

４．作成したブラウザ設定を規定値にします

５．キャンセルで閉じます

動作確認

Razor Pagesアプリケーションで、簡単なプログラムを実行してみます。

Index.cshtml

<button onclick="sampleOnClick()">ボタン</button>

site.js

function sampleOnClick() {
    alert("デバッグテスト");
}

実行結果

無事ブレークポイントで止めることができました！
もちろん、変数の中身なども見ることができます。（今回はないですが）

ちなみに、今回作成したブラウザ設定はここから切り替えることができます。

注意事項

埋め込みのJavaScriptコードはサポートされていないようです。
デバッグしたければ、別ファイルに分ける必要があります。

動作環境

• Windows 11 Home（23H2）
• .NET 8.0（SDK 8.0.204）
• Visual Studio 2022

参考