Blazor client-side debugging

Z

12

43

In a client-side Blazor app the C# breakpoints are disabled and not hit.

Is there a way to attach or enable the debugger?

Zetes answered 23/5, 2019 at 2:26 Comment(0)

B

30

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.

Blindworm answered 14/11, 2019 at 7:1 Comment(4)

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 – Katar 17/12, 2019 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? – Blindworm 18/12, 2019 at 2: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}"); – Katar 29/12, 2019 at 9:52

still not success :( – Dispirited 23/9, 2021 at 13:28

C

25

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

User IE "Microsoft Edge" (don't use Google Chrome).
Use self hosted application (don't use IIS Express).
Hit F5 and enjoy.

Construe answered 23/7, 2020 at 8:13 Comment(3)

I was surprised that Edge worked but neither Chrome nor Firefox did, but it is true for me. – Underworld 9/3, 2022 at 15:34

Using https and Microsoft edge worked for me. This should be the accepted answer. – Vanessa 19/3, 2023 at 17:49

This is a game changer for me, might save me from having to become a javascript expert. – Adebayo 30/1 at 21:18

D

13

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/

Dreamland answered 28/3, 2020 at 19:37 Comment(0)

P

4

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();

        (...)
    }
}

Preparator answered 20/8, 2020 at 6:8 Comment(0)

M

3

I just hit this issue due to using Brave as a browser, As soon as I told Visual Studio to use Chrome or Edge the client breakpoints suddenly started working.

Malanie answered 23/1, 2022 at 6:32 Comment(0)

E

2

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://learn.microsoft.com/en-us/aspnet/core/blazor/debug?view=aspnetcore-3.1&tabs=visual-studio

Ervinervine answered 1/9, 2020 at 7:57 Comment(2)

The "inspectUri" is now automatically added for new projects in Visual Studio. – Lowrance 26/11, 2020 at 8: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. – Beitch 23/2, 2021 at 16:52

H

2

It's only available in Google Chrome and Microsoft Edge. Also in Visual Studio 2022, you have to enable Script Debugging. Then you are able to debug and the breakpoint will be hit.

Herminiahermione answered 27/9, 2022 at 13:8 Comment(0)

H

1

It's an old post, but I had this same symptom with a different fix and couldn't find a great answer posted elsewhere.

If you are using Visual Studio in Windows to debug and have set the HTTP_PROXY/HTTPS_PROXY environment variables, it turns out that VS debugging needs to use the proxy. That seems to mean that you need to also set NO_PROXY env var to let the debugger connect to localhost...

NO_PROXY=localhost,127.0.0.1

After I did that, client-side debugging in my Blazor WASM app worked.

Hardhack answered 26/8, 2022 at 14:36 Comment(0)

S

1

There are 5 different things that need to be set properly in order for this to work, at least in Visual Studio 2022.

Make sure you're in Debug mode when you run the project.
Select either Chrome or Edge as the Web Browser, as below.
Set the Script Debugging menu item to Enabled, as below.
Make sure the Launch browser option is checked (true). This can be done either through the <Project Name> Properties menu (as shown above) or via the Properties\launchSettings.json file directly. You can't debug your code through an already running browser.

In the launchSettings.json file, enter this:

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

This is an example of a minimal launchSettings.json file:

{
    "profiles": {
       "http": {
          "commandName": "Project",
          "launchBrowser": true,
          "environmentVariables": {
            "ASPNETCORE_ENVIRONMENT": "Development"
          },
          "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
          "applicationUrl": "http://localhost:5127"
       }
    ...

Salmi answered 17/2, 2023 at 14:16 Comment(0)

B

0

My problem was fixed by enabling "Enable .NET Framework source stepping" This automatically disables the "Enable Just My Code" see VS Options dialog box

Boggers answered 6/10, 2022 at 20:22 Comment(0)

C

0

This is the problem of the Visual Studio version. Update your VS and your problem will be solved. good luck

Compression answered 31/1, 2023 at 11:9 Comment(0)

S

0

This issue has been addressed in .NET 7 Framework. You can just add the debugger and the breakpoint will get hit.

Samala answered 11/7, 2023 at 23:13 Comment(0)

Recommended topics

Hot tags