How can one debug embedded code in razor pages?

Question

I am looking at Blazor client side with asp.net hosting. So I am going through the template project and Visual Studio Preview does not seem to support breakpoints in razor pages, more specifically the code block:

@code {
   private WeatherForecast[] forecasts;

   protected override async Task OnInitializedAsync()
   {
       forecasts = await Http.GetJsonAsync<WeatherForecast[]>("WeatherForecast"); //breakpoint here
   }

}

Is there a workaround or maybe something I am missing? Thank you!

Answer 1

Blazor Webassembly debugging is currently available only using Chrome browser debugging proxy. The steps are described in Blazor docs:

1. Run a Blazor WebAssembly app in Debug configuration.
2. Pass the --configuration Debug option to the dotnet run command: dotnet run --configuration Debug
3. Access the app in the browser.
4. Place the keyboard focus on the app, not the developer tools panel. The developer tools panel can be closed when debugging is initiated.
5. Select the following Blazor-specific keyboard shortcut:

• Shift+Alt+D on Windows/Linux
• Shift+Cmd+D on macOS

5. Follow the steps listed on the screen to restart the browser with remote debugging enabled.
6. Select the following Blazor-specific keyboard shortcut once again to start the debug session:

• Shift+Alt+D on Windows/Linux
• Shift+Cmd+D on macOS

The "Hit F5 in Visual studio" debugging experience is not ready yet. Bits of it have been demonstrated by Daniel Roth in the .NET community standup video. Basically, Visual studio can attach to the browser's debugging proxy. Currently, in the preview versions, you have to do a series of steps manually, while in the future, those should be streamlined and done by the Visual studio.

Update March 26, 2020

Microsoft released a new preview of WASM Blazor and an improved support for debugging in Visual studio. Details here.