LoginSignup
2
0
@okayu__11

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

Last updated at Posted at 2024-08-21

設定手順

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

１．Visual Studioを開き、ツール > オプションを押下します
image.png
２．デバッグの中から、「ASP.NET の JavaScript のデバッグを有効にする (Chrome、Edge、IE)」をチェックします
image.png
３．OKボタン押下で閉じます
image.png

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

１．デバッグターゲット > ブラウザーの選択を押下します
image.png
２．追加を押下します
image.png
３．以下の通り入力し、OKボタンを押下します
プログラム：実行に使用したいブラウザのアプリケーションパス
引数：--remote-debugging-port=任意のポート
表示名：任意の名前
image.png
４．作成したブラウザ設定を規定値にします
image.png
５．キャンセルで閉じます
image.png

動作確認

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

Index.cshtml
<button onclick="sampleOnClick()">ボタン</button>
site.js
function sampleOnClick() {
    alert("デバッグテスト");
}

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

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

注意事項

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

動作環境

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

参考

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0