개요

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 버전 16.6.0 미리보기 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 앱 만들기

앱 만들기

미리보기 버전의 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판만의 대응인가라고 생각했습니다만, 미호스트판에서도 사용할 수 있었던 것은 좋았습니다.