Debugging blazor client side app

Debugging in blazor

Blazor supports full debugging in blazor server side. But, if you work with client-side you still have the opportunity to debug your code. At the writing moment, there is only early support of debugging blazor webassembly apps and there are some limitations.

• Only int, string and bool type variables are observable
• Classes and their properties and fields are not observable
• Hover to observe is not working
• Execute code expressions in the console is not working
• Step into async methods is not working

Anyway, debugging allows to set and remove breakpoins, observe local variables of int, string and bool types. Also you can see call stack including when js call .net and vise versa.

Prerequisites

• You need chrome +70 version

How to

1.NOTE. The debugger works only for Http. Https in not working

1. Run your app
2. Open your client app in chrome

3. Press Shift+Alt+D. You get the following message

4. Follow instructions
5. Open a new instance of chrome as the instruction says
6. Press Shift+Alt+D again

7. New page will be open

8. Go to the Sources tab. In the left side, goto page and find your code in file://
9. Set breakpoint

Conclusion

You have ability to debug your code, observe variables and analyze call stack. It is not fully featured, however, it is more than nothing.