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

Question

In JavaScript we can use the following call to write debug output to the browser´s console:

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

Output in Google Chrome:

How can I log "My debug output" in my component to the browser´s console via Blazor WebAssembly?

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

@code {

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

I think you can do it in c# using `Console.WriteLine("My debug output.");` with capital c — Alexan, Apr 02 '20 at 13:26

score 74 · Accepted Answer · edited Mar 13 '23 at 22:16

74

I usually do something like this:

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

if it's Blazor WebAssembly, I see the message in the browser´s console.

If it's Blazor Server App I see the message in the Output window. (In the output window, there is a dropdown - select: " ASP.NET Core Web Server").

edited Mar 13 '23 at 22:16

Robert Harvey

178,213
47
333
501

answered Apr 02 '20 at 13:28

enet

41,195
5
76
113

Easier than I thought. Is Console.WriteLine("My debug output."); cross-browser compatible? – Simon Apr 02 '20 at 13:31
Works in Edge, Chrome and FF. Thank you. – Simon Apr 02 '20 at 13:34

Greg Gum · Answer 2 · 2022-03-04T14:12:18.777

40

If your using Blazor Server (not WebAssembly) you can only write to the browser console using JSInterop. I wrote a wrapper class like this:

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

Then in your page, you can inject the JsConsole and use it:

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

edited Mar 04 '22 at 14:12

answered Nov 13 '20 at 02:37

Greg Gum

33,478
39
162
233

3

this is the best way to do this. I suggest making this take an `object` instead of a `string` parameter, as javascript's `console.log()` method can take any object and output it as either a string or as a javascript object which gives better formatting in the log. – DLeh Feb 20 '22 at 16:09

score 20 · Answer 3 · edited Jan 25 '21 at 09:33

20

You can user an ILogger<T> that give you the possibility to write warning or error in the console :

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

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

edited Jan 25 '21 at 09:33

alvarez

700
7
19

answered Apr 02 '20 at 13:45

agua from mars

16,428
4
61
70

3

ILogger: [By default, Blazor apps log to console output with the Console Logging Provider. ... During development, Blazor usually sends the full details of exceptions to the browser's console to aid in debugging. In production, detailed errors in the browser's console are disabled by default](https://learn.microsoft.com/en-us/aspnet/core/blazor/handle-errors?view=aspnetcore-3.1#log-errors-with-a-persistent-provider) – dani herrera Apr 02 '20 at 14:25

score 6 · Answer 4 · answered Dec 22 '21 at 18:17

For Blazor Server, you can just inject the JS Runtime and then you can access it like so in your .razor file:

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

More information about calling JS functions from Blazor: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0

score 2 · Answer 5 · answered Feb 20 '22 at 16:09

2

Building on @Greg Gum's answer, javascript's console.log() can also accept any object. Therefore if you send it an object, you will get a nice output of the full object as a javascript object, rather than just a string.

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

answered Feb 20 '22 at 16:09

DLeh

23,806
16
84
128

In Blazor WebAssambly I used it like this: Add a class JsConsole.cs in the SharedProject (add using Microsoft.JSInterop; ) Add it as Scoped Service in Program.cs in the Client-Project and inject it in the TemplatePage FetchData(Weatherforcast). Call it in OnInitializedAsync() ... await JsConsole.LogAsync(forecasts); -> you get the table of forcastes in the browser console. NICE thx you DLeh – nogood Jan 03 '23 at 09:44

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

5 Answers5