The problem: Blazor is Microsoft's frontend framework that lets you write web UIs in C#. It's growing fast but lacks the debugging tools other frameworks have. When your component tree gets complex, you're stuck with Console.WriteLine debugging.
What I built: A browser extension + NuGet package that:
Shows the Razor component tree in your browser Maps DOM elements back to their source components Highlights components on hover Works with both Blazor Server and WASM
How it works: The NuGet package creates shadow copies of your .razor files and injects invisible markers during compilation. These markers survive the Razor→HTML pipeline. The browser extension reads these markers to reconstruct the component tree.
Current status: Beta - it works but has rough edges. Found some bugs when testing on larger production apps that I'm working through. All documented on GitHub.
Technical challenges solved:
Getting markers through the Razor compiler without breaking anything Working around CSS isolation that strips unknown attributes Making it work with both hosting models
It's completely open source:
https://github.com/joe-gregory/blazor-devtools
Demo site where you can try it:
https://blazordevelopertools.com
Would love feedback, especially from anyone building production Blazor apps. What debugging pain points do you have that developer tools could solve?
dandeto•3mo ago
dandeto•3mo ago
The marker-injection broke on a foreach loop because it began with @ directly under the @inject. I added an html element between them to fix this.
```
@inject IJSRuntime JSRuntime;
@foreach(var item in MyCollection)
@* Injected by BlazorDeveloperTools (Dev-only) - Open *@
<span ... ></span>
{
}```
I also get the error: "MyComponent.razor.js was defined but no associated razor component was found for it" when trying to build, so I had to temporarily delete that js file.
I used BdtSkipComponents a few times to get it to build, so - probably as a cascading effect - some components that show up on the tree do not have the correct name when using the hover tool. Instead it's the name of the root component.
When the page loads I see "} else {" and other curly braces that aren't supposed to be on my page.
When I open the extension and click on the component tree, the purple boxes never disappear, so I have to reload the page.
Now onto the good news: The render tree is correct and I'm able to hover over most components and see what their name is - nicely done! I'm interested to watch as your project develops. Thanks again for helping out the blazor community.
To answer your question in OP, what I most struggle to debug is the Blazor lifecycle. For example, sometimes OnParametersSetAsync gets triggered an awful lot when I don't expect it to, and that takes quite a bit of my time to find the trigger and sort it out.