Blazor Developer Tools

Adds Blazor debugging tools to Chrome/Edge Developer Tools

Blazor Developer Tools Ever wished you could right-click on a Blazor app and see the actual Razor markup instead of just HTML? Or click on any element and instantly know which .razor component it belongs to? That's exactly what Blazor Developer Tools does. It adds a "Blazor" tab to Chrome/Edge DevTools that shows your component tree - just like React DevTools, but for Blazor. FEATURES - Component Tree Visualization - See your Blazor component hierarchy in DevTools - Element Picker - Click any element on the page to identify its Blazor component - File Path Display - See which .razor file each component comes from - CSS Isolation Support - Full support for Blazor CSS isolation - Debug & Production Modes - Works in both Debug builds and optionally Release builds INSTALLATION You need 2 components: 1. This browser extension 2. The NuGet package: BlazorDeveloperTools Add to your project: dotnet add package BlazorDeveloperTools USAGE Once both are installed: 1. Run your Blazor app in Debug mode 2. Open DevTools (F12) 3. Navigate to the "Blazor" tab 4. See your component tree! For detailed documentation, visit the GitHub repository.