Blazor client-side debugging

blazor blazor-client-side
AlvinfromDiaspar picture AlvinfromDiaspar · May 23, 2019 · Viewed 10.6k times · Source

I noticed that all of my C# breakpoints do not get hit as debugging seems like its disabled for client-side Blazor apps.

Is there a way to attach the debugger or enable the debugger somehow?

Thanks

Answer

fuzzy_logic picture fuzzy_logic · Nov 14, 2019

For those who like some pictures, here's a step by step using Visual Studio 16.4 preview (.NET Core 3.1 preview 2) & Chrome version 78.

Start up the app using a debug profile. E.g.

Start debugging

After site loads, and with the cursor focus on the chrome tab press "Shift+Alt+D".

Site loads

Chrome will open a new tab showing "Unable to find debuggable browser tab". Find the first instance of the message "Press Win+R". Copy the full line below which starts "chrome -- remote-debugging-port..."

Remote debugging

Hit "Win+R" and paste in the text you just copied and hit enter. A new Chrome window will open..

For the second time, press "Shift+Alt+D" and you should now see something a bit more promising..

Chrome debugger

From here, set a few breakpoints, E.g.

Set your breakpoints

Go back to the tab running Blazor app, trigger your breakpoint. From here you can press F10 for a single step, and F8 for resume. Inspect locals via the "Scope" window as shown.

Finally, the locals are shown!

Related questions

How to use Bootstrap modal in Blazor client app?

I am trying to show bootstrap modal then bind its buttons. But I cannot pass the first step showing the modal. I am using Blazor client template of .net core 3.1. I have a page named Modal.razor which contains the …

Read More
How to add font awesome to Blazor client (razor component) app?

I created a blazor webassembly hosted template dot net core 3.1. Then right clicked on project.Client/wwwroot/css folder and click on add client side library. Then selected font-awesome library in installed it. I added below line to index.html …

Read More
How to acess the appsettings in blazor webassembly

I currentying trying to save the api url in an appsettings. However, the configuration.Propertiers seems to be empty. I am not sure how to get the setting. in program.cs: public static async Task Main(string[] args) { var builder = …

Read More