在 Chrome DevTools 中检查 Blazor 组件和服务
Blazor 开发工具，由 Alex Howard 创建，是一个 Chrome 扩展，帮助开发人员在开发过程中调试 ASP.NET Core Blazor 应用程序。它向浏览器的开发者工具添加了一个检查面板，以显示组件关系和运行时信息，而无需依赖控制台日志记录。该扩展检测服务器和 WebAssembly 主机，并需要通过 NuGet 包进行小的运行时集成。其目标受众是偏好可视化、运行时感知调试的 Blazor 开发人员，在本地编码时使用。
工具如何实时暴露组件内部
扩展提供了一个可视化检查工作流程，将调试从控制台日志转移到专用的 DevTools 面板。在该面板内，您可以查看实时组件树并检查参数值、级联参数、声明的类型和选定节点的内部状态。元素选择器将 DOM 元素链接到其组件条目，帮助您在与页面交互时追踪渲染路径和状态变化。
您必须安装什么以及它出现的位置
安装分为两个部分：添加 Chrome 扩展并在 Blazor 项目中包含 NuGet 包，然后在 Program.cs 中注册其服务。设置完成后，检查器作为 "Blazor" 标签出现在 DevTools 中（使用 F12 或检查打开）。该工具自动检测服务器或 WebAssembly 托管，因此相同的检查器工作流程适用于这两种托管模型。
它如何处理生产和安全
安全性内置于运行时门控中。该工具在开发模式之外禁用自己，防止在生产网站上暴露组件元数据。该自动门控意味着项目在部署后不会提供检查所需的运行时钩子，从而将组件参数和服务安排排除在公共构建之外，同时保留本地和暂存诊断。
谁受益以及它如何塑造调试工作流程
它适合从 JavaScript 开发工具转向 .NET 的开发人员。该面板提供类似 React 的检查流程，减少了手动将 HTML 映射到 .razor 文件的需要。DI 查看器显示组件解析了哪些服务，这在排查中到大型代码库中的服务依赖行为时非常有帮助。更喜欢可视化跟踪而非临时日志记录的团队获得了最清晰的生产力提升。
最适合接受小项目变更的开发工作流程
该工具是Blazor开发人员在开发过程中需要直接运行时可见性的实用选择。这个权衡要求在项目中添加一个小的运行时钩子，并接受在部署后检查器不可用。因此，它适合那些在本地编码时优先考虑更快的、可视化的组件问题诊断的团队，而不是远程的、部署后的检查。
