概要

Blazor WebAssembly 3.2.0 Preview 3がリリースされ、Visual Studio(とVisual Studio Code)のデバッグに対応したようなので、Visual Studioでのデバッグを試した際のメモです。

参照元

環境

Windows 10(64bit) 1909
Google Chorome 80.0.3987.149 (64bit)

.NET Core SDK 3.1.300-preview-015048
Microsoft.AspNetCore.Blazor 3.2.0-preview3.20168.3
Visual Studio 2019 Version 16.6.0 Preview 2.0

セットアップ

最新の.NET Core SDK(3.1.201) のインストール

下記から最新バージョンのSDKをインストールします。
リンク

テンプレートの更新

下記のコマンドで最新のBlazor WebAssembly templateをインストールします。

dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview3.20168.3

Visual Studio 2019 Previewのインストール

下記から最新のプレビュー版のVisual Studioをインストールします。(16.6.0 Preview 2.0)
リンク

私は試していませんが、最新プレビュー版をインストールすると、上記のSDKとテンプレートも合わせてインストールされるとのことですので、Preview版のインストールだけを実施だけでも良いかもしれません。

Blazor WebAssemblyアプリ作成

アプリの作成

Preview版のVisual Studioを起動し、新規にBlazor WebAssemblyのアプリを作成します。
(リリース元の説明ですと、ASP.NET Core hostedを使用した場合の説明となっていましたが、チェックをつけない場合でもデバッグできました。)

デバッグ

デバッグ時のブラウザ指定

私の環境では、Edgeをデバッグ時のブラウザに指定すると、デバッグができませんでした。
(Microsoft Edge 44.18362.449.0)

Choromeを指定することでデバッグ可能になったので、起動ブラウザを変更しました。

デバッグ実行

あとは、通常通りデバッグ実行を開始します。

ブレークポイントで止まってくれます。

this以下に変数が格納されていてウォッチも可能です。

おわりに

簡単にですが、Visual Studioを用いたBlazor WebAssemblyアプリのデバッグ方法を紹介しました。
まだプレビュー版ですが、使い慣れたVisual Studioでデバッグできるのは嬉しいですね。

説明を見ていた時には今回はASP.NET Core hosted版だけの対応かと思いましたが、未ホスト版でも使えたのは良かったです。