Getting Started

Debugging BlazorWasm is possible in Google Chrome (version 70 or later) or Microsoft Edge preview.

I have this simple Razor page in Blazor:

I want to debug the IncrementCount method.

To be able to debug, you need to run the Blazor app with a debug configuration profile. For doing this open a terminal inside the root of the project and execute the command below:

dotnet run --configuration Debug

Navigate to the URL your app will be run on it. (https://localhost:5001).

Press Shfit+Alt + D (on Mac Shift + Cmd + D)

Most of the time, Blazor and Chrome debugger cannot connect to your app and give you an error like this:

If you saw this window, copy the command and run Chrome with these arguments in Run:

chrome --remote-debugging-port=9222 --user-data-dir="\Temp\blazor-chrome-debug" http://localhost:5000/

It will open Chrome, press the debugger key combination to open the debugger. Inside Sources and file:// you can see your source codes, set or remove breakpoints to control your application workflow.

Sample of debugging

As you can see, I cannot see the values of properties even by hovering mouse or add a watch. To be able to see the values inside your application, you can write data in the browser console by Console.WriteLine in Blazor code.

When running your app (debug profile is not needed), every-time the app reaches Console.WriteLine it will log it inside browser console.

Console logging

Error diagnosis

Consider the code below:

@code {

private int currentCount = 0; private int currentCount = 0; private void IncrementCount()

{

int a = 0;

int b = 0; currentCount = a / b;

}

}

The code above will throw an exception. If we run the app, you will see the error and stack state in the browser console.

It tells you what exception has occurred.

You can see what method and what line caused the error.