BlazorDeveloperTools 1.0.0-beta.1

Docs

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

Installation

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

1. Install the NuGet Package

dotnet add package BlazorDeveloperTools

Or add to your .csproj:

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

2. Install the Browser Extension

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

Usage

Basic Setup (Debug Mode)

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!

Production Mode (Optional)

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.

How It Works

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

Configuration Options

Control the tool's behavior via MSBuild properties:

<PropertyGroup>
  
  <EnableAutomaticMarkers>false</EnableAutomaticMarkers>
  
  
  <BdtVerbose>true</BdtVerbose>
  
  
  <EnableBlazorDevToolsInProduction>true</EnableBlazorDevToolsInProduction>
</PropertyGroup>

Contributing

This project is open source! We welcome contributions.

GitHub Repository

License

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

Support

• 🐛 Report issues
• 💬 Discussions
• 📧 Contact: [blazordevelopertools@gmail.com]

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