Blazor Server端应用如何无需手动排查即可查看组件层级结构

下面提供两种不需要手动遍历组件的实现方式：

方案1：开发时直接查看（零代码成本，仅调试用） #

.NET 6及以上版本的Blazor Server默认内置了调试面板，直接按以下步骤操作即可：

• 运行应用后用Chrome/Edge打开页面，按F12调出开发者工具
• 在顶部选项卡找到「Blazor」面板（如果没显示就点击右侧>>按钮在隐藏列表里查找）
• 展开根组件节点，即可直接看到完整的嵌套组件层级，还支持实时查看每个组件的参数、状态、渲染时间等信息

方案2：运行时自动收集层级（支持自定义导出、业务场景使用） #

只需要少量代码即可全局自动收集组件层级，不需要修改原有业务逻辑：

第一步：注册全局层级管理服务 #

创建ComponentHierarchyService.cs文件，代码如下：

public class ComponentHierarchyService
{
    private readonly List<ComponentInfo> _rootComponents = new();
    private readonly Dictionary<object, ComponentInfo> _componentMap = new();

    // 注册组件
    public void RegisterComponent(IComponent component, IComponent? parentComponent)
    {
        var info = new ComponentInfo
        {
            ComponentName = component.GetType().Name.Replace("__Generated", ""),
            Instance = component
        };
        _componentMap[component] = info;

        if (parentComponent == null)
        {
            _rootComponents.Add(info);
            return;
        }

        if (_componentMap.TryGetValue(parentComponent, out var parentInfo))
        {
            parentInfo.Children.Add(info);
            info.Parent = parentInfo;
        }
    }

    // 组件销毁时注销
    public void UnregisterComponent(IComponent component)
    {
        if (_componentMap.Remove(component, out var info))
        {
            info.Parent?.Children.Remove(info);
            _rootComponents.Remove(info);
        }
    }

    // 获取完整层级
    public List<ComponentInfo> GetFullHierarchy() => _rootComponents.ToList();
}

public class ComponentInfo
{
    public string ComponentName { get; set; }
    public object Instance { get; set; }
    public ComponentInfo Parent { get; set; }
    public List<ComponentInfo> Children { get; set; } = new();
}

在Program.cs里注册为单例服务：

builder.Services.AddSingleton<ComponentHierarchyService>();

第二步：全局组件自动上报 #

自定义组件基类，所有组件自动继承即可，不需要单独修改每个组件：

1. 创建CustomComponentBase.cs文件：

public class CustomComponentBase : ComponentBase, IDisposable
{
    [Inject] private ComponentHierarchyService HierarchyService { get; set; }
    [CascadingParameter] private IComponent? ParentComponent { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        HierarchyService.RegisterComponent(this, ParentComponent);
    }

    public void Dispose()
    {
        HierarchyService.UnregisterComponent(this);
        GC.SuppressFinalize(this);
    }
}

2. 在项目根目录的_Imports.razor文件里添加一行，全局指定组件基类：

@inherits CustomComponentBase

如果需要统计框架自带的App、MainLayout等组件，只需要在对应组件的razor文件顶部手动加上上面这行继承规则即可。

第三步：查看层级 #

你可以新增一个调试页面，用来输出层级结构，代码如下：

@page "/debug/component-hierarchy"
@inject ComponentHierarchyService HierarchyService

<h3>组件层级结构</h3>

@foreach (var rootNode in HierarchyService.GetFullHierarchy())
{
    <ul>
        @RenderNode(rootNode)
    </ul>
}

@code {
    private RenderFragment<ComponentInfo> RenderNode = (node) =>
    @<li>
        @node.ComponentName
        @if (node.Children.Any())
        {
            <ul>
                @foreach (var child in node.Children)
                {
                    @RenderNode(child)
                }
            </ul>
        }
    </li>;
}

访问/debug/component-hierarchy路径即可看到你需要的嵌套列表形式的组件层级。

内容的提问来源于stack exchange，提问作者yesman