将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

然而，例如，如果我要按如下方式运行a日志；

logger.LogDebug(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中进行了测试。

Answer 2

当您可以直接使用console.log时，没有必要创建adition JS函数。

/// <summary>
/// Calls "console.log" on the client passing the args along with it.
/// </summary>
/// <example>
/// LogAsync("data") //same as console.log('data')
/// </example>
/// <example>
/// LogAsync("data", myData) //same as console.log('data', myData)
/// </example>
/// <param name="js"></param>
/// <param name="args"></param>
public static async Task LogAsync(this IJSRuntime js, params object?[]? args)
{
await js.InvokeVoidAsync("console.log", args);
}

用作

[Inject]
private IJSRuntime Js { get; set; } = default!;
await Js.LogAsync(myObject);

我写了一些其他扩展，你可以在这里找到：https://gist.github.com/Eonasdan/9cbd63c7e2ebd8624191a97befb64f00

Answer 3

在提出此问题时，Console API可能还不存在。但今天，我们可以做到这一点：

Console.WriteLine('my string');

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