Search code examples
c#.netblazormauiserilog

Debugging MAUI Blazor App in Chrome style or getting errors seen


I try to migrate my web Blazor app to MAUI.

I'm curious, if there is the way to see tools like Chrome 'Console', 'Network' etc. while debugging MAUI Blazor app on Windows? The source of the question is my triage to migrate web app (Blazor) to desktop with plans to do so on mobile? Does somebody of you, community, tried to do so? The first experience I've got is getting instant error and 'loading...' message with asking to reload page - that's not very informative.

It would be much more helpful to see error details or to get access to tools like in browser, if possible.

Thank you in advance.

EDIT

Here is MainPage.xaml (modified):

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CBT.MAUI.Blazor"
             xmlns:web="clr-namespace:CBT.Web.Blazor;assembly=CBT.Web.Blazor;"
             x:Class="CBT.MAUI.Blazor.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type web:App}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</ContentPage>

I also tried to enable Serilog, but no file with errors was created.

var logger = new LoggerConfiguration()
    .ReadFrom.Configuration(builder.Configuration)
    .Enrich.FromLogContext()
    .CreateLogger();
builder.Logging.ClearProviders();
builder.Logging.AddSerilog(logger);

The original line with logging to debug doesn't produce any output with errors:

builder.Logging.AddDebug();

Also I copied a Services.


Solution

  • First, you need to add builder.Services.AddBlazorWebViewDeveloperTools(); in MauiProgram.cs file.

    For the Windows platform, after running the project, Use the keyboard shortcut Ctrl+Shift+I to open browser developer tools.

    For the Android platform, open a new tab in your browser (outside the emulator) and type:

    For Chrome: chrome://inspect
    For Edge: edge://inspect
    For Firefox: about:debugging
    

    Then click the inspect button in the browser.

    For more details you can refer to Use browser developer tools with ASP.NET Core Blazor Hybrid