Blazor WasmをVSCodeでデバッグする！！
Visual Studioより～♪
普通に～♪
VS Codeが好きー!!
ゴッホより～（ry
どうも、あっきーです🍍
ということで今までVisual Studioを使っていましたが、
使い慣れたVisual Studio Codeに移行してみたいと思います。
基本的に公式ガイドに沿って準備を進めていきますが、
個人的にMSのガイドは分かりづらく感じることが多いので
補足情報を追記しながら作業録として記載していきます。
#環境
Windows 11
.NET8.0
Blazor WebAssembly
VSCodeでデバッグをしよう♪
1. 拡張機能"C#開発キット"をインストール
VSCodeの拡張機能「c# dev kit」をインストールする。
インストール後、他に2つの拡張機能も自動的にインストールされます。
2. Properties/launchSettings.jsonにinspectUriを追加
私の環境だともともと設定されていました。
profilesノードの各起動プロファイルに以下を追加します。
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"inspectUri プロパティ:
・アプリが Blazor アプリであることを IDE で検出できるようにします。
・スクリプト デバッグ インフラストラクチャに対して、Blazor のデバッグ プロキシを使用してブラウザーに接続するように指示します。
らしいです。
3. ミドルウェアの追加
Chromium 開発者ツール内で Blazor WebAssembly アプリをデバッグするためには以下のミドルウェアを追加する必要があります。
VScodeでデバックができればいいので私はこの対応はスキップしました。
以下のガイドが該当します。
ASP.NET Core アプリをデバッグする > パッケージ
試された方は結果をコメントください🙇♂️
開発者ツール内でデバックできるメリットがあれば実施してみたいです。
4. いざデバッグ開始！！！
「Run and Debug」をクリック!!!!
まだ設定が必要でした。
VSCode上部にdebuggerの選択肢が出てくるので「C#」を選択する。
VSCode上部にLaunch Configurationの選択肢が出てくるので「Default Configuration」を選択する。
しばらくすると画面が立ち上がりますね
ブレークポイントを設定して画面を動かしてみると、、、、、、
止まりますね！！！！🙌
特にハマることなく設定ができました！🙌
公式ガイドさん、わかりづらいと言ってすみません🙇♂️🙇♂️🙇♂️
簡単にできました。
すぐ設定が終わってしまったので、
ホットリロードの確認もしてみます。
5. ホットリロードを確認してみる
以下のコマンドを実行
> dotnet watch🔥とか🚀とか可愛いですよね
変更が即時反映されますね！！
やはり使い慣れたエディタが一番楽ですね！
最後に
弊社は一緒に働いていただける方を募集中です！
就職/転職活動中や、まだ情報収集中の方、
少しでも興味を持っていただけた方は、以下のアドレスに「note見た！」とご連絡いただけると幸いです💡
プロダクト推進部/採用担当アドレス：pdo_js@persol.co.jp