将 Blazor 中的对象记录到控制台

Question

我想将一个对象记录到控制台浏览器，以便在运行时在客户端 WASM Blazor 应用程序上查看。
我可以记录字符串值没有问题，但我希望能够像使用 javascript console.log 一样记录和深入研究对象。
我在运行;

Microsoft.AspNetCore.Blazor 3.1.0-Preview3.19555.2
Blazor.Extensions.Logging 1.1.0-preview2

各州的文件

The logger supports the same string formatting that MEL provides, together with named parameter replacement in the message.

Additionaly, you're able to log an object in the browser console. You can expand members and hierachies to see what's contained within.

If you want to log an enumerable list of objects, then the browser side component will display it by calling console.table.

取自 BlazorExtensions/Logging
但是，例如，如果我要按如下方式运行日志；

logger.LogDebug(result);

其中 result 是一个 POCO 对象。它不编译。
我将记录器注入(inject)到 razor文件

@inject ILogger<AddForm> logger

在我的 startup.cs

services.AddLogging(builder => builder
    .AddBrowserConsole() 
    .SetMinimumLevel(LogLevel.Trace)
);

最后在我的 _import.razor我有;

@using Microsoft.Extensions.Logging

为了完整起见，我还尝试过 JSON 序列化对象；

 logger.LogDebug("Logging Contact Object", JsonConvert.SerializeObject(contact));

但这只是将“对象”输出到控制台。
并且;

logger.LogDebug($"Logging Contact Object :{contact}:");

但这只是记录对象的名称。
任何人都可以帮助指导我这里哪里出错了吗？

Answer 1

您可以在 c# 中为 javascript console.log 创建一个包装器。
在您的 html 或 javascript 文件中，定义一个函数 -

log = (obj) => { console.log(obj); } 

然后在您的 blazor 服务文件中 -

public async Task LogToConsole(object obj)
{
    await _jsRuntime.InvokeVoidAsync("log", obj); //_jsRuntime is injected IJSRuntime
}

然后，您可以通过在 blazor 页面/组件中调用此方法将任何对象记录到控制台。
我在 Chrome 中对其进行了测试。