Debugging Blazor WebAssembly
Code doesn't always behave as expected—sometimes, it does something entirely different! When that happens, the next step is to figure out why. While staring at the code for hours might be tempting, using a debugging tool is a far more efficient approach.
A debugger isn't a magic solution that instantly exposes every bug. Instead, it allows you to run your code step by step, pinpointing where an issue occurs. Tools like Visual Studio help you track errors, understand necessary fixes, and even make temporary adjustments to keep your program running.
Mastering debugging takes time and practice, but it’s an essential skill for every software developer. In this article, we’ll explore how to debug Blazor WebAssembly code in Visual Studio.
- Setting up your project before debugging
- Debugging with Google Chrome
- Debugging with Microsoft Edge
- What should you do if your breakpoint does not hit?
Note: Currently, Mozilla Firefox does not support debugging for Blazor WebAssembly.
Setting up your project before debugging
Using a custom template for a new project may hinder debugging. It’s best to start with Microsoft’s default template and add third-party extensions later to ensure debugging works properly.
When running your project, make sure to check the Launch browser option to enable debugging.
Tip: You can set up the same browser multiple times with different arguments for debugging.
Debug with Google Chrome
- Put a breakpoint in your code.
- Select Google Chrome as your browser.
- Run your project, and a new window of Google Chrome will appear. Visual Studio will pause at the breakpoint you set in step 1, allowing you to debug your code.
Debug with Microsoft Edge
- Put a breakpoint in your code.
- Select Microsoft Edge as your browser.
- Run your project, and a new window of Microsoft Edge will appear. Visual Studio will pause at the breakpoint you set in step 1, allowing you to debug your code.
What should you do if your breakpoint does not hit?
- Ensure you are using the project template provided by Microsoft.
- Ensure that the breakpoint is set before hitting run.
- Once the browser starts, open the Developer Tools immediately (F12) and check in the Application tab if any new version is not installed.
