Blazor WasmをVSCodeでデバッグする！！

Visual Studioより～♪
普通に～♪
VS Codeが好きー!!
ゴッホより～（ry

Visual Studioより普通にVS Codeが好きな男。本家より動きがカッコイイ!!

---

どうも、あっきーです🍍

ということで今までVisual Studioを使っていましたが、
使い慣れたVisual Studio Codeに移行してみたいと思います。

基本的に公式ガイドに沿って準備を進めていきますが、
個人的にMSのガイドは分かりづらく感じることが多いので
補足情報を追記しながら作業録として記載していきます。

#環境
   Windows 11
   .NET8.0
　Blazor WebAssembly

VSCodeでデバッグをしよう♪

1. 拡張機能"C#開発キット"をインストール

VSCodeの拡張機能「c# dev kit」をインストールする。

c# dev kit

インストール後、他に2つの拡張機能も自動的にインストールされます。

拡張機能1

2. Properties/launchSettings.jsonにinspectUriを追加

私の環境だともともと設定されていました。
profilesノードの各起動プロファイルに以下を追加します。

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"

inspectUri プロパティ:
・アプリが Blazor アプリであることを IDE で検出できるようにします。
・スクリプト デバッグ インフラストラクチャに対して、Blazor のデバッグ プロキシを使用してブラウザーに接続するように指示します。

https://learn.microsoft.com/ja-jp/aspnet/core/blazor/debug?view=aspnetcore-8.0&tabs=visual-studio#app-configuration-prerequisites

らしいです。

3. ミドルウェアの追加

Chromium 開発者ツール内で Blazor WebAssembly アプリをデバッグするためには以下のミドルウェアを追加する必要があります。

VScodeでデバックができればいいので私はこの対応はスキップしました。
以下のガイドが該当します。
ASP.NET Core アプリをデバッグする > パッケージ

試された方は結果をコメントください🙇‍♂️
開発者ツール内でデバックできるメリットがあれば実施してみたいです。

4. いざデバッグ開始！！！

「Run and Debug」をクリック!!!!

Run and Debug

まだ設定が必要でした。

VSCode上部にdebuggerの選択肢が出てくるので「C#」を選択する。

Select debugger

VSCode上部にLaunch Configurationの選択肢が出てくるので「Default Configuration」を選択する。

Select Launch Configuration

しばらくすると画面が立ち上がりますね

ブレークポイントを設定して画面を動かしてみると、、、、、、

止まりますね！！！！🙌

break point

特にハマることなく設定ができました！🙌
公式ガイドさん、わかりづらいと言ってすみません🙇‍♂️🙇‍♂️🙇‍♂️
簡単にできました。

すぐ設定が終わってしまったので、
ホットリロードの確認もしてみます。

5. ホットリロードを確認してみる

以下のコマンドを実行

> dotnet watch

🔥とか🚀とか可愛いですよね

dotnet watch

変更が即時反映されますね！！

Hot Reload

やはり使い慣れたエディタが一番楽ですね！

最後に

弊社は一緒に働いていただける方を募集中です！
就職/転職活動中や、まだ情報収集中の方、
少しでも興味を持っていただけた方は、以下のアドレスに「note見た！」とご連絡いただけると幸いです💡
プロダクト推進部/採用担当アドレス：pdo_js@persol.co.jp

タイトル未設定