如何通过开发者工具查找Blazor组件的名称

Blazor组件默认会渲染成普通HTML元素（比如你遇到的div），但可以通过以下两种方式快速定位组件信息：

• 手动给组件添加标识属性
  在组件的根元素上添加自定义属性，比如data-component，直接绑定组件的完整类型名：

  <!-- 子组件的根元素 -->
  <div data-component="@GetType().FullName">
      这是子组件的内容
  </div>
  

  打开Chrome开发者工具的Elements面板，找到对应的div元素，就能看到data-component属性的值，里面包含组件的命名空间和类名，以此定位组件文件路径。

• 使用Blazor开发者工具扩展
  安装Chrome商店里的Blazor DevTools扩展，安装后在Elements面板会新增Blazor相关视图，直接就能看到组件的名称、层级关系，无需手动添加属性即可查看组件信息。

内容的提问来源于stack exchange，提问作者Chandan Ankush Gauns