如何调试Blazor Server中的SignalR消息？有无更优调试方案？

一、优化Chrome开发者工具的二进制消息查看 #

Blazor Server默认采用二进制格式传输SignalR消息，直接在Chrome开发者工具的WebSocket面板中看到的是不可读的二进制数据，可通过以下步骤转为可读格式：

• 打开Chrome开发者工具，切换到Network标签，筛选WS类型的连接
• 找到_blazor对应的WebSocket连接并点击进入，切换到Frames标签
• 勾选Frames面板顶部的Decode text选项（需确保Chrome版本为较新版本），二进制消息会自动解析为JSON格式，即可直接查看消息内容

二、更优的调试替代方案 #

1. 服务端启用SignalR详细日志 #

在Program.cs中配置SignalR的日志级别，让服务端控制台或日志文件输出完整的消息交互细节：

builder.Services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.EnableDetailedErrors = true;
        options.Logging.LogLevel = LogLevel.Trace;
    });

启动应用后，控制台会打印SignalR的所有收发消息，包括调用参数、返回值及连接状态等信息。

2. 自定义CircuitHandler拦截消息 #

通过实现CircuitHandler接口，可在服务端全局拦截Blazor Circuit的所有消息，自定义日志或调试逻辑：

public class DebugCircuitHandler : CircuitHandler
{
    private readonly ILogger<DebugCircuitHandler> _logger;

    public DebugCircuitHandler(ILogger<DebugCircuitHandler> logger)
    {
        _logger = logger;
    }

    public override Task OnConnectionUpAsync(Circuit circuit, CancellationToken cancellationToken)
    {
        _logger.LogInformation($"Circuit {circuit.Id} 已连接");
        return base.OnConnectionUpAsync(circuit, cancellationToken);
    }

    public override Task OnIncomingAsync(Circuit circuit, string data, CancellationToken cancellationToken)
    {
        _logger.LogTrace($"收到来自 {circuit.Id} 的消息: {data}");
        return base.OnIncomingAsync(circuit, data, cancellationToken);
    }

    public override Task OnOutgoingAsync(Circuit circuit, string data, CancellationToken cancellationToken)
    {
        _logger.LogTrace($"发送给 {circuit.Id} 的消息: {data}");
        return base.OnOutgoingAsync(circuit, data, cancellationToken);
    }
}

随后在Program.cs中注册该Handler：

builder.Services.AddScoped<CircuitHandler, DebugCircuitHandler>();

所有客户端与服务端的交互消息都会被记录到日志中，便于精准定位问题。

3. 客户端启用SignalR日志 #

在客户端的_Host.cshtml或wwwroot/js/app.js中配置SignalR日志，在浏览器控制台查看客户端侧的消息交互：

// 在Blazor初始化前添加以下配置
Blazor.start({
    configureSignalR: function (builder) {
        builder.configureLogging(signalR.LogLevel.Trace);
    }
});

浏览器控制台会输出客户端与服务端的所有SignalR日志，包括连接状态、消息收发的详细内容。

三、实用调试技巧 #

• Visual Studio断点调试：在服务端的SignalR处理代码中设置断点，触发消息处理时可直接查看消息内容、调用栈及变量状态
• 临时切换为文本传输格式：调试期间可临时将SignalR的传输格式改为文本，方便直接查看消息，调试完成后再切换回二进制（生产环境推荐使用二进制以提升性能）：

// 服务端配置
builder.Services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.Transports = Microsoft.AspNetCore.Http.Connections.HttpTransportType.WebSockets;
        options.EnableDetailedErrors = true;
    });

// 客户端配置
// Blazor.start({
//     configureSignalR: function (builder) {
//         builder.withHubProtocol(new signalR.JsonHubProtocol());
//     }
// });

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