如何通过 Blazor WebAssembly 写入浏览器的控制台？

Question

在 JavaScript 中，我们可以使用以下调用将调试输出写入浏览器的控制台：

console.log("My debug output.");

Google中的输出Chrome:

如何通过 Blazor WebAssembly 将组件中的 "My debug output" 记录到浏览器的控制台？

<button @onclick="ClickEvent">OK</button>

@code {

    private void ClickEvent()
    {
        // console.log("My debug output.");
    }
}

Answer 1

我经常这样做：

Console.WriteLine("My debug output.");

如果是 Blazor WebAssembly，我会在浏览器的控制台中看到消息。

如果是 Blazor Server App，我会在输出中看到消息 window。（在输出 window 中，有一个下拉菜单 - select: " ASP.NET Core Web Server")

希望这对您有所帮助...

Answer 2

您可以使用 ILogger<T> 使您可以在控制台中写入警告或错误：

@using Microsoft.Extensions.Logging
@inject ILogger<MyComponent> _logger
...
@code {

     protected override void OnInitialized()
     {
          _logger.LogWarning("warning");
          _logger.LogError("error");
     }
}

Answer 3

如果您使用 Blazor Server（而非 WebAssembly），您只能使用 JSInterop 写入浏览器控制台。我像这样写了一个包装器 class：

public class JsConsole
{
   private readonly IJSRuntime JsRuntime;
   public JsConsole(IJSRuntime jSRuntime)
   {
       this.JsRuntime = jSRuntime;
   }

   public async Task LogAsync(string message)
   {
       await this.JsRuntime.InvokeVoidAsync("console.log", message);
   }
}

然后在您的页面中，您可以注入 JsConsole 并使用它：

await this.JsConsole.LogAsync(message); //Will show in the browser console.

Answer 4

对于 Blazor Server，您只需注入 JS 运行时，然后就可以在 .razor 文件中像这样访问它：

@inject IJSRuntime JS
...
@code {
    protected override async void OnInitialized()
    {
        await JS.InvokeVoidAsync("console.log","loaded");
    }
}

有关从 Blazor 调用 JS 函数的更多信息：https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0

Answer 5

基于@Greg Gum 的回答，javascript 的 console.log() 也可以接受任何对象。因此，如果你向它发送一个对象，你将得到一个很好的完整对象输出作为一个 javascript 对象，而不仅仅是一个字符串。

public class JsConsole
{
   private readonly IJSRuntime JsRuntime;
   public JsConsole(IJSRuntime jSRuntime)
   {
       this.JsRuntime = jSRuntime;
   }

   //change this parameter to object
   public async Task LogAsync(object message)
   {
       await this.JsRuntime.InvokeVoidAsync("console.log", message);
   }
}

如何通过 Blazor WebAssembly 写入浏览器的控制台？

How can I write into the browser´s console via Blazor WebAssembly?

blazor

blazor-client-side

asp.net-blazor