Show HN: I Built DevTools for Blazor (Like React DevTools but for .NET)

[joe-gregory]

https://blazordevelopertools.com/

Hi HN! I've been working on developer tools for Blazor that let you inspect Razor components in the browser, similar to React DevTools or Vue DevTools.

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]

I will try this out at work this week. I guess I don't know what I've been missing since I never seriously dove into react or vue. I rely on having my breakpoints hit for debugging, which works pretty well, but when I hear that something could make me a faster developer, I am all ears! It's also great to see more devs investing in Blazor.

[dandeto → dandeto]

I have some bugs to report:

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>

{

    // Code and markers look correct here

}

```

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.

[8mobile]

Thank you so much for this tool, it was just what was missing for Blazor development. I can finally avoid having to include Console.WriteLine everywhere.

Do you have any other features in mind? Thanks