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?