Blazor Developer Tools Beta 1: It Finally Talks to the Renderer

#blazor #dotnet #opensource #webdev

If you've ever used React DevTools, you know how valuable it is to see your component tree, understand why something re-rendered, and find performance bottlenecks. Blazor has never had anything like that. So I built it.

Some of you may remember my earlier posts about Blazor Developer Tools. Those versions worked, but they were limited — I couldn't get the data I really needed without requiring developers to change their code. Beta 1 is a complete architectural rewrite, and it's the version I originally had in mind when I started this project.

The difference: BDT now talks directly to the Blazor renderer.

Why This Matters

The Blazor renderer doesn't expose its component tree publicly. Earlier versions of BDT had to work around this, which meant limited visibility and more setup required from the developer.

In beta 1, BDT uses reflection to sync with the renderer's internal state. That means it can now read component IDs, parent-child relationships, parameters, and internal state — all without you changing a single line of your component code.

Install the NuGet package, register the service, and you immediately get a full component tree in your browser DevTools:

dotnet add package BlazorDeveloperTools

builder.Services.AddBlazorDevTools();

That's it. Open DevTools, look for the "Blazor" tab.

The Three Pillars Architecture

Beta 1 is built on three pillars that work together:

Pillar 1: Component Activator — automatically intercepts all component instantiation. Every component that gets created, BDT knows about it. No opt-in required.

Pillar 2: Renderer Sync — this is the new one. BDT reads the Blazor renderer through reflection to get the real component tree: IDs, hierarchy, parameters, state. This is what makes the component tree view and "why did this render?" diagnostics possible without any code changes.

Pillar 3: Enhanced Components (opt-in) — for developers who want the deepest metrics, inheriting from BlazorDevToolsComponentBase gives you lifecycle method timing, ShouldRender tracking, StateHasChanged counts, and parameter change detection.

Pillars 1 and 2 are fully automatic. Pillar 3 is there for when you need to dig deeper into a specific component.

What You Get in Beta 1

Component Tree — your full Blazor component hierarchy, live in DevTools
Timeline Profiler — hit record, interact with your app, see every render event
Flamegraph — visual swimlane timeline of component events with zoom and pan
"Why Did This Render?" — click any render event to see what triggered it
Ranked View — find your slowest and most frequently rendering components
Element Picker — click anything on the page to find its Blazor component

What's Honest About the Current State

This is a beta. There are rough edges. One feature isn't fully working yet. It currently supports InteractiveAuto (Server) render mode only — WebAssembly support is planned.

But the core architecture is solid, and the foundation that previous versions were missing is now in place. This is the version I can actually build on.

Looking for Testers and Contributors

If you build with Blazor, I'd genuinely appreciate you trying it out and telling me what works and what doesn't. Open issues, start discussions, or just DM me.