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.

• 🔍 Component Tree Visualization - See your Blazor component hierarchy in Chrome/Edge 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

You need to install 2 components: this NuGet package and a chrome/edge extension.

dotnet add package BlazorDeveloperTools

Or add to your .csproj:

<PackageReference Include="BlazorDeveloperTools" Version="0.9.0" />

• Chrome: Chrome Web Store
• Edge: Edge Add-ons

Once installed, the package automatically adds component markers to your Blazor app in Debug mode. No additional configuration needed!

1. Run your Blazor app in Debug mode
2. Open Chrome/Edge DevTools (F12)
3. Navigate to the "Blazor" tab
4. See your component tree!

To enable component markers in Release/Production builds:

<PropertyGroup>
  <EnableBlazorDevToolsInProduction>true</EnableBlazorDevToolsInProduction>
</PropertyGroup>

⚠️ Note: This adds small hidden markers to your HTML. Impact is minimal but consider the trade-offs for production use.

1. Build-time transformation: The NuGet package injects hidden marker elements into your Razor components during compilation
2. Runtime detection: The browser extension detects these markers and builds a component tree
3. DevTools integration: Displays the component hierarchy in a dedicated DevTools panel

Control the tool's behavior via MSBuild properties:

<PropertyGroup>
  <!-- Disable automatic markers -->
  <EnableAutomaticMarkers>false</EnableAutomaticMarkers>
  
  <!-- Enable verbose build output -->
  <BdtVerbose>true</BdtVerbose>
  
  <!-- Enable in production builds -->
  <EnableBlazorDevToolsInProduction>true</EnableBlazorDevToolsInProduction>
</PropertyGroup>

This project is open source! We welcome contributions.

GitHub Repository

Licensed under the Apache License 2.0. See LICENSE for details.

• 🐛 Report issues
• 💬 Discussions
• 📧 Contact: [[email protected]]

Built with ❤️ for the Blazor community by Joseph E. Gregory