Use browser dev tools with Blazor Hybrid

Rogier van der Hee — Tue, 19 Apr 2022 20:18:03 +0000

As the exciting journey begins into creating hybrid mobile apps with MAUI Blazor, we start including our shiny Blazor components into native apps. But how can you use the Browser dev tools?

First, create a new app using the MAUI Blazor App Preview template:

Now add these lines in your MauiProgram.cs:

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

Next, launch app in the Android emulator:

OK, now the app is running, now start a Desktop Edge browser and enter edge://inspect/#devices as url:

After a few seconds a Remove target appears with your app name in it:

Finally, click inspect to launch the Dev tools for your instance and now you can use all your existing tools like inspect, layout etc!

Forem: Rogier van der Hee

Use browser dev tools with Blazor Hybrid