maui: MAUI WebView doesn't allow to web session to inspected in Safari developer tools (Mac Catalyst)

@headintheclouds21 I think I got it figured out. I haven’t actually tested and JS in it yet (busy on another project) but it at least shows up in Safari so I suspect JS debugging will work.

So what I did was create a project with the default maui blazor template. I also made the changes outlined in the PR that fixed this issue. The trick to getting this to work (for me at least) is adding the following to the MainPage.xaml.cs file.

public MainPage()
{
    InitializeComponent();
    Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, EventArgs e)
{
    if (blazorWebView.Handler.PlatformView is WKWebView view)
    {
        view.SetValueForKey(NSObject.FromObject(true), new NSString("inspectable"));
    }
}

Once I did that the app shows up in Safari again.

I found some confirmations that the entitlement is needed (get-task-allow) to have the Safari inspect tools work, but also confirmed that Xcode doesn’t include any entitlements for a Cocoa app and it works for Xcode.

May be Xcode includes this entitlements for debug builds automatically without asking us? Found here

get-task-allow is typically added by Xcode automatically for development builds

@headintheclouds21 I think I got it figured out. I haven’t actually tested and JS in it yet (busy on another project) but it at least shows up in Safari so I suspect JS debugging will work. So what I did was create a project with the default maui blazor template. I also made the changes outlined in the PR that fixed this issue. The trick to getting this to work (for me at least) is adding the following to the MainPage.xaml.cs file.

public MainPage()
{
    InitializeComponent();
    Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, EventArgs e)
{
    if (blazorWebView.Handler.PlatformView is WKWebView view)
    {
        view.SetValueForKey(NSObject.FromObject(true), new NSString("inspectable"));
    }
}

Once I did that the app shows up in Safari again.

hello. Can you please let me know what are the PR changes you refer to. The conversation of this thread is so hard to follow as they are way too many comments 😃 Apologise I could not find the full solution.

I followed what you said, but then changed it slightly.

#if MACCATALYST
        WebKit.WKWebView view = (WebKit.WKWebView)blazorWebView.Handler.PlatformView;
        view.SetValueForKey(Foundation.NSObject.FromObject(true) , new Foundation.NSString("inspectable"));
#endif

now I see that @gerneio already got exactly what I had to write it as. My fault.

For me, the preprocessing directives (as shown in #14067) weren’t firing on my iOS Simulator device, so I switched it to this:

    private partial void BlazorWebViewInitialized(object? sender, BlazorWebViewInitializedEventArgs e) 
    {
#if IOS || MACCATALYST
        // Enable Developer Extras for Catalyst/iOS builds for 16.4+
        if ((DeviceInfo.Current.Platform == DevicePlatform.MacCatalyst && DeviceInfo.Current.Version >= new Version(13, 3)) ||
            (DeviceInfo.Current.Platform == DevicePlatform.iOS && DeviceInfo.Current.Version >= new Version(16, 4)))
        {
            e.WebView.SetValueForKey(Foundation.NSObject.FromObject(true), new Foundation.NSString("inspectable"));
        }
#endif
    }

@v-Lily I created an example repository where inspectable has been implemented. Hope this helps!

According to this page, you can make a WKWebView inspectable like this:

#if DEBUG
#if MACCATALYST13_3_OR_GREATER
        webview.SetValueForKey(NSObject.FromObject(true), new NSString("inspectable"));
#elif IOS16_1_OR_GREATER
        if (DeviceInfo.Version.Minor >= 4)
            webview.SetValueForKey(NSObject.FromObject(true), new NSString("inspectable"));
#endif
#endif

@v-Lily I created an example repository where inspectable has been implemented. Hope this helps!

Thanks for your comment. According to your example repository, the Mac IOS simulator is still not allowed in the Safari developer tools, but the MacCatalyst simulator is available in the Safari developer tools.

sorry guys. I have tried it again. I run into issues such as NSObject is not defined neither NSString. I am definitely missing an import somehow for those. would you know how to resolve ?

Try this:

platformView.SetValueForKey(global::Foundation.NSObject.FromObject(enableWebDevTools), new global::Foundation.NSString("inspectable"));

If you’re building for a platform other than MacCatalyst you might get that message. Try adding a conditional if the advice above didn’t help.

public MainPage()
{
    InitializeComponent();
    Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, EventArgs e)
{
#if DEBUG && MACCATALYST13_3_OR_GREATER
    if (blazorWebView.Handler.PlatformView is WKWebView view)
    {
        view.SetValueForKey(NSObject.FromObject(true), new NSString("inspectable"));
    }
#endif
}

The issue linked to this one has nothing to do with what I fixed:

https://github.com/dotnet/maui/pull/14610

In short, Apple replaced the APIs for setting the debug flag to make the view inspectable. I changed the defaults for Blazor WebViews to enable it by default for debug mode, but you can call the same APIs right now in your app to enable it again, which is what @tstephansen did.

Once the webview is loaded (either by checking for the Handler Change event, or when the page loads) you can invoke the handlers platform view and set the flags to enable it.

(Again, to make it clear to people in this thread, this was never a MAUI bug, Apple changed the APIs and we changed the code to match)

@headintheclouds21 I think I got it figured out. I haven’t actually tested and JS in it yet (busy on another project) but it at least shows up in Safari so I suspect JS debugging will work.

So what I did was create a project with the default maui blazor template. I also made the changes outlined in the PR that fixed this issue. The trick to getting this to work (for me at least) is adding the following to the MainPage.xaml.cs file.

public MainPage()
{
    InitializeComponent();
    Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, EventArgs e)
{
    if (blazorWebView.Handler.PlatformView is WKWebView view)
    {
        view.SetValueForKey(NSObject.FromObject(true), new NSString("inspectable"));
    }
}

Once I did that the app shows up in Safari again.

hello. Can you please let me know what are the PR changes you refer to. The conversation of this thread is so hard to follow as they are way too many comments 😃 Apologise I could not find the full solution.

https://developer.apple.com/documentation/webkit/wkwebview/4111163-isinspectable

Seems like it was added for 16.4

https://github.com/xamarin/xamarin-macios/blob/main/src/webkit.cs#L5507-L5509

It should be bound in the next Xamarin.MaciOS Xcode update. Trying out that selector you wrote in Swift and C# it worked with the older SDK.

So you could use the selector for now until the next SDK bump.

@tstephansen I believe this is unrelated to MAUI.

https://github.com/drasticactions/MauiRepros/tree/main/WebViewChartTest

The developer tools don’t work from a straight Swift or Objective-C Mac Catalyst app either. I think this was broken by Apple at some point between when this issue was “fixed” and today.

@alexeystrakh did you get it working with the get-task-allow entitlement?

@Eilon we also have https://github.com/dotnet/maui/issues/5561 which tracks enabling dev tools for Blazor WebView. Do we want to keep this issue open for MAUI WebView or close it as a duplicate?

Also, not sure if you’ll be able to access this; but this bug has been reported to & acknowledged by Apple: https://feedbackassistant.apple.com/feedback/9972022