Help us understand the problem. What is going on with this article?

Blazor WebAssemblyのアプリケーションをVisual Studioでデバッグする

概要

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を使用した場合の説明となっていましたが、チェックをつけない場合でもデバッグできました。)

v3.png

デバッグ

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

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

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

v2.png

デバッグ実行

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

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

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

おわりに

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

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

nobu17
主に.NETなどのMS系の技術を仕事で使っています。 私用ではvue.jsなどのフロントエンド系を中心に勉強中です。 GitHub https://github.com/nobu17 Twitter https://twitter.com/nobu23
http://nobunobu1717.site/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした