How to inspect and debug the webview on Android for app created using MAUI?

Question

In my .Net MAUI app (not Blazor app) I have a WebView control in which I am rendering html pages generated at runtime (epub book pages), and it has lot of JavaScript code.

I need to inspect the WebView and access the debugger tools, to debug any issues with JS, etc.

For UWP apps, I used to use this https://apps.microsoft.com/store/detail/microsoft-edge-devtools-preview/9MZBFRMZ0MNJ?hl=en-us&gl=us

I am looking for something similar for Android using MAUI.

I found a similar question, but it's for Blazor app and builder.Services.AddBlazorWebViewDeveloperTools() does not work on MAUI app.

https://stackoverflow.com/questions/71919608/how-to-inspect-and-debug-the-maui-hybrid-blazor-webview-on-android

https://stackoverflow.com/questions/71991692/maui-blazor-an-unhandled-error-has-occurred/72652029#72652029

Answer 1

Hello,

Microsoft Edge DevTools could be used for debugging MAUI Android Webview, please refer to the following documentation and steps:

• Remotely debug Android WebViews.

Step 1. Add the following code to the MainActivity class to enable debugging of Android WebView.

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    if (Build.VERSION.SdkInt >= BuildVersionCodes.Kitkat)
    {
        Android.Webkit.WebView.SetWebContentsDebuggingEnabled(true);
    }
} 

Step 2: Build your application.

Step 3: Open the edge://inspect using the Edge browser and click the Inspect button below your Android device that appears on the page.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.