.NET Tools How-To's

Blazor Debugging Improvements in Rider 2021.2

The EAP versions of Rider 2021.2 have been released with a major improvement for Blazor developers: debugging WebAssembly (WASM) apps! This has been one of the top requested features since Blazor itself was released. In Rider 2021.2, you can now debug both Blazor Server apps and Blazor WASM apps!

The Debugging Experience

In Blazor apps, the overall debugging experience is the same as in other types of .NET apps in Rider. Debugging activities, features, and keyboard shortcuts remain the same, but now you can step through the both C# code and the Razor code that is intertwined with HTML. When starting a debugging session, the debugger launches and attaches to an instance of Chrome or Edge, including Edge on Ubuntu. From there, you can switch between the web UI and the debugger.

Blazor WASM Debugger in action

Browser Tools Integration

While in a debugging session, you can continue to use the browser’s developer tools as a nice supplement to Rider’s debugging tools. Browser tools work the same as before, but now you can use them in tandem with Rider’s debugger.

Blazor WASM tools works with the browser

Debug Configurations for Multiple Projects

Debugging more complex Blazor WASM apps with multiple projects works well, as Rider’s debugger works the same as in previous versions with Web API code and .NET class libraries. The optimal way to set up debugging multiple projects at the same time, is to create a Run Configuration that launches the API project first, followed by the UI project. In the Run | Edit Configurations the menu, create a Compound run configuration and add the two projects you want to launch.

Create Debug Configurations for multiple projects

Configuration Settings

And finally, there are configuration options for Blazor WASM debugging found under Settings | Build, Execution, Deployment | Debugger. Here you can enable Blazor debugging, Blazor WASM backend debugging, and the browser logs for Chromium based browsers.

Settings for WASM debugging

Rider 2021.2 has brought together excellent debugging features to make your debugging experience as smooth and pleasant as possible.

Download Rider 2021.2 EAP and give it a try! Let us know how you like to use the debugging tools. We’d love to hear your feedback.

image description