24

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

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

谷歌浏览器中的输出：

谷歌浏览器中的控制台输出

如何通过 Blazor WebAssembly 将组件中的“我的调试输出”记录到浏览器控制台？

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

@code {

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

5 回答 5

38

我通常会这样做：

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

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

如果是 Blazor Server 应用程序，我会在“输出”窗口中看到该消息。（在输出窗口中，有一个下拉菜单 - 选择：“ASP.NET Core Web Server”）

希望这可以帮助...

于 2020-04-02T13:28:59.450 回答
19

如果您使用 Blazor Server（不是 WebAssembly），则只能使用 JSInterop 写入浏览器控制台。我写了一个这样的包装类：

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.
于 2020-11-13T02:37:11.280 回答
14

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

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

     protected override void OnInitialized()
     {
          _logger.LogWarning("warning");
          _logger.LogError("error");
     }
}
于 2020-04-02T13:45:12.630 回答
0

对于 Blazor 服务器，您可以只注入 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

于 2021-12-22T18:17:59.150 回答
0

基于@Greg Gum 的回答，javascriptconsole.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);
   }
}
于 2022-02-20T16:09:03.910 回答