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-beta.5 — Highlight Updates: toggle the sparkle button and watch components flash on the page as they re-render — wasted renders become visible in real time. Plus the Element Picker (new in beta.4): click any element on the page to identify and inspect its Blazor component. FEATURES Component Tree — Visualize your entire Blazor component hierarchy Element Picker — Hover to highlight component boundaries on the page, click to select the component in the tree (works on disabled controls and static content too) Highlight Updates — Flash components on the page as they re-render, React DevTools style: instantly spot components re-rendering when they shouldn't Live Details — Parameter values, render stats, and internal state update in real time as you use your app 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 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, pick an element on the page, 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