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

Si

I think you can do it in c# using Console.WriteLine("My debug output."); with capital c – Tawnatawney

Answer 1

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").

Malleus

Easier than I thought. Is Console.WriteLine("My debug output."); cross-browser compatible? – Si

Works in Edge, Chrome and FF. Thank you. – Si

Answer 2

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.

Accouchement

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. – Neolamarckism

Answer 3

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

Assamese

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 – Lucite

I assume this only uses the console.log level and not console.error, console.warning, console.info according to the logged message level? – Douty

@Douty no, LogWarning uses console.warning, LogError uses console.error, LogInformation uses console.info, LogTraceuses console.trace. – Assamese

Answer 4

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

Walrath

Answer 5

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

Neolamarckism

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 – Connie