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

Question

我想将一个对象记录到控制台浏览器，以便在运行时在客户端 WASM Blazor 应用程序上查看。

我可以毫无问题地记录字符串值，但我喜欢能够像使用 javascript console.log 一样记录和深入了解对象。

我在跑步;

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

各州的文件

记录器支持 MEL 提供的相同字符串格式以及消息中的命名参数替换。

此外，您还可以在浏览器控制台中记录对象。您可以展开成员和层次结构以查看其中包含的内容。

如果你想记录一个可枚举的对象列表，那么浏览器端组件将通过调用console.table来显示它。

取自BlazorExtensions/Logging

但是，例如，如果我要按如下方式运行日志；

logger.LogDebug(result);

其中 result 是 POCO 对象。它不能编译。

我将记录器注入到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 中测试了它。