Blazor client-side debugging

Question

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

fuzzy_logic · Answer 1 · 2020-09-17T00:12:45.653

21

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.

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

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..."

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..

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

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.

edited Sep 17 '20 at 00:12

answered Nov 14 '19 at 07:01

fuzzy_logic

645
9
11

Hi there, I have done as you said and I get he debugger new tab. My app however does not show within the debugger, it is instead empty, any suggestions – SilenceAmongCrows Dec 17 '19 at 21:48
Hey - What's an example of the cmd you're executing to run Chrome remote debugger? Also, assuming you're on Chrome version 70 or later? – fuzzy_logic Dec 18 '19 at 02:31
Hey there I am using latest version of chrome, and am not using remote debugger. I wish to debug locally. I still can't debug however I have been a bit cheeky and resulted to Console.WriteLine($"Blah Blah some variable: {foo}"); – SilenceAmongCrows Dec 29 '19 at 09:52

score 12 · Answer 2 · answered May 23 '19 at 07:35

12

There is no debugging experience for client-side Blazor in Visual Studio.The only option right now is to use the Chrome debugger.

This is all explained in the official documentation, https://docs.microsoft.com/en-gb/aspnet/core/blazor/debug?view=aspnetcore-3.0

answered May 23 '19 at 07:35

Chris Sainty

5,880
29
54

This is not longer true for ASP.NET Core 3.1, more details can be found in the answer's link. – eduherminio Jul 03 '20 at 17:43

score 12 · Answer 3 · answered Mar 28 '20 at 19:37

In the latest version of the blazor preview functionality has being added to debug client side code with visual studio. Follow the instructions on the link below on how to upgrade your solution and use the debugger.

https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-preview-3-release-now-available/

score 4 · Answer 4 · answered Jul 23 '20 at 08:13

4

Yes there's a way to debug your client side c# code:

1.User IE "Microsoft Edge", "Don't use google Chrome".

2.Use self hosted application "Don't use IIS express".

3.Hit F5 and enjoy

answered Jul 23 '20 at 08:13

Hamdan Dabbas

337
1
2
10

score 3 · Answer 5 · edited Aug 20 '20 at 06:56

This is a known issue in Blazor projects at this time. The debugger launches slower/quicker than the project assembly and doesn't have time to "see" the assembly. Here is my fix until they solve this. I add a delay in Program.cs so that when the project launches in debug mode, it gives the debugger time to attach properly. I used 5000 ms but you may have to increase this value if your machine is slower than mine.

public class Program
{
    private static async Task DebugDelayAsync()
    {
#if DEBUG
        await Task.Delay(5000);
#endif
    }

    public static async Task Main(string[] args)
    {
        await DebugDelayAsync();

        (...)
    }
}

score 1 · Answer 6 · edited Sep 01 '20 at 16:24

1

The good news is that now (August 2020) you can use Visual Studio 2019 V16.6 or higher to debug the client side Blazor code! To do so, update the launchSettings.json file in the startup project to include the following inspectUri property in each launch profile:

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"

Source: https://docs.microsoft.com/en-us/aspnet/core/blazor/debug?view=aspnetcore-3.1&tabs=visual-studio

edited Sep 01 '20 at 16:24

fcdt

2,151
5
9
24

answered Sep 01 '20 at 07:57

Dániel Erős

53
1
7

2

The "inspectUri" is now automatically added for new projects in Visual Studio. – Greg Gum Nov 26 '20 at 08:27
If you are adding a Blazor WASM project to an existing solution, you will need to do this manual step for your startup project. – Jason D Feb 23 '21 at 16:52

Blazor client-side debugging

6 Answers6

Linked