时间戳

首页 > 解决方案 > 将 Blazor 中的对象记录到控制台

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

问题描述

我想将一个对象记录到控制台浏览器，以便在运行时在客户端 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}:");

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

任何人都可以帮助指导我这里哪里出错了吗？

标签： loggingblazorblazor-client-side

解决方案

您可以在 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 中对其进行了测试。

推荐阅读