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 - 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