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

【问题标题】：Logging object in Blazor to Console将 Blazor 中的对象记录到控制台
【发布时间】：2020-07-30 21:08:00
【问题描述】：

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

我可以记录字符串值没问题，但我希望能够像使用 javascript console.log 一样记录和深入研究对象。

我在跑步；

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

各州的文档

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

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

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

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

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}:");

但这只是记录对象的名称。

谁能帮助指导我这里哪里出错了？

【问题讨论】：

【解决方案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 中测试过。

【讨论】：

【解决方案2】：

在提出这个问题时，控制台 API 可能还不存在。但是今天，我们可以这样做：

Console.WriteLine('my string');

这将在 Chrome DevTools 的控制台面板中输出。在 Blazor WebAssembly 和 .Net 5.0.301 SDK 中测试。

【讨论】：