CODEWITHSUNDEEP
maui-blazor
NSS
NSS

Reputation: 2022

How to Debug .NET MAUI Blazor Hybrid Windows UI

I am basically from web background and trying out .NET MAUI Blazor Hybrid. I am running into errors during development with .NET MAUI Window, but not sure how to debug it? I have looked around all type of windows and cannot find error details anywhere.

I tried debugging, but that is a headspin as it goes into a loop.

image

Upvotes: 10

Views: 6673

Answers (2)

Ewerton
Ewerton

Reputation: 4523

There is a way to "remotely inspect" your app using the browser developer tool (F12). First, check if you added the builder.Services.AddBlazorWebViewDeveloperTools(); in your MauiProgram.cs Run your App and open a new tab in your browser (outside the emulator) and type:

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

Wait a little and you will see an "inspect" button like below: enter image description here

And you can even navigate in your App from there: enter image description here

Upvotes: 13

JLeon
JLeon

Reputation: 193

You have to ensure that the WebDev Tools are activated. Browser developer tools with .NET MAUI Blazor

Ensure the Blazor Hybrid project is configured to support browser developer tools. You can confirm developer tools support by searching the app for AddBlazorWebViewDeveloperTools

If the project isn't already configured for browser developer tools, add support by:

  1. Locating where the call to AddMauiBlazorWebView is made, likely within the app's MauiProgram.cs file.

  2. After the call to AddMauiBlazorWebView, add the following code:

    #if DEBUG
    builder.Services.AddBlazorWebViewDeveloperTools();
#endif

To use browser developer tools with a Windows app:

  1. Run the .NET MAUI Blazor app for Windows and navigate to an app page that uses a BlazorWebView.

  2. Use the keyboard shortcut Ctrl+Shift+I to open browser developer tools.

Upvotes: 12

Related Questions