Blazor Developer Tools

Blazor Developer Tools

The first visual DevTools for Blazor. See your component tree, profile renders, understand why components re-render. No more console.log debugging.

NEW IN v1.0.0 - Complete rewrite with Timeline Profiler, Flamegraph visualization, and "Why Did This Render?" feature.

FEATURES

Component Tree - Visualize your entire Blazor component hierarchy
Timeline Profiler - Record and analyze component renders over time
Flamegraph View - Visual swimlane timeline with zoom and pan
"Why Did This Render?" - See exactly what triggered each render
Ranked View - Find your slowest components at a glance
Element Picker - Click any element to identify its Blazor component
File Path Display - See which .razor file each component comes from
Works With Any Component - No code changes required for basic tracking
Enhanced Metrics - Opt-in for deep lifecycle timing

INSTALLATION
You need 2 components:

This browser extension
The NuGet package: BlazorDeveloperTools

dotnet add package BlazorDeveloperTools

USAGE

Run your Blazor app
Open DevTools (F12)
Navigate to the "Blazor" tab
Explore Components or record a Timeline profile

TIMELINE PROFILER

Click Record, interact with your app, click Stop
Switch between Events, Ranked, and Flamegraph views
Click any event to see why it rendered

For documentation and live demo: www.blazordevelopertools.com
GitHub: github.com/joe-gregory/blazor-devtools