Blazor Developer Tools

Developer tools for debugging Blazor applications

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-beta.3 — Redesigned Timeline: a new "Sequence" view keeps bursts of render activity readable no matter how long you record (long pauses are marked, not drawn), plus smooth cursor-anchored zoom & pan up to 100x, and reliable event selection. FEATURES Component Tree — Visualize your entire Blazor component hierarchy Timeline Profiler — Record and analyze component renders over time Three Timeline Views — Sequence (subway-map style), Time (proportional), and Time with idle gaps collapsed Flamegraph Swimlanes — Per-component lanes with zoom, pan, and color-coded lifecycle events "Why Did This Render?" — See exactly what triggered each render: parameter changes, StateHasChanged, EventCallbacks, and more Ranked View — Find your slowest and most frequently rendering components at a glance 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 base class for deep lifecycle timing (OnInitialized, ShouldRender rates, render efficiency) INSTALLATION You need 2 components: 1. This browser extension 2. The NuGet package: BlazorDeveloperTools dotnet add package BlazorDeveloperTools Then register it in Program.cs: builder.Services.AddBlazorDevTools(); Note: the beta currently supports Blazor Server / InteractiveAuto (Server) render mode. WebAssembly-only support is planned. USAGE 1. Run your Blazor app 2. Open DevTools (F12) 3. Navigate to the "Blazor" tab 4. Explore Components or record a Timeline profile TIMELINE PROFILER 1. Click Record, interact with your app, click Stop 2. Switch between Events, Ranked, and Flamegraph views 3. Pick your time axis: Sequence for readable event flow, or Time for wall-clock accuracy 4. Click any event to see its timing and why it rendered 100% free and open source (Apache 2.0). No data collection — everything stays in your browser. Documentation and live demo: www.blazordevelopertools.com GitHub: github.com/joe-gregory/blazor-devtools