Debugging Blazor WebAssembly website

Debugging is the very important part in the development process. In this tutorial:

• Learn how to debug with Google Chrome.
• Learn how to debug with Microsoft Edge.
• Good to know about debugging.

Currently, Mozilla Firefox does not available for debugging. This tutorial uses the project that you had built in the Building a website tutorial series.

Debugging with Google Chrome

1. Put a breakpoint in your code. For example, in ProductList.razor as follows:

2. Select Google Chrome as the debugging browser. For example:

3. Once you run the website, a new browser will appear. Open the product list page to trigger the breakpoint as follows:

Debugging with Microsoft Edge

1. Put a breakpoint in your code. For example, in ProductList.razor as follows:

2. Select Microsoft Edge as the debugging browser. For example:

3. Once you run the website, a new browser will appear. Open the product list page to trigger the breakpoint as follows:

Good to know about debugging Blazor WebAssembly

• Debugging with Mozilla Firefox is not supported (yet).
• You can add arguments when launching the browser. For example, debugging Blazor WebAssembly in Microsoft Edge with a specific profile as follows:

• You must open a new browser when you want to debug. If your project doesn't launch browser when you run it, open Project properties and select Debug → General → Open debug launch profiles UI → Tick the Launch browser check as follows:

• Using a custom template for Blazor might make your project not able to debug. Always use the default template that Microsoft provided, then add third party extension later.