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

[alexeystrakh]

Description

WKWebView Safari developer tools (inspect option) are not available in a MAUI Mac app. If the same app is created using native tooling Xcode + Swift with no extra configuration/entitlements - it works (there is a visible session to inspect in Safari dev tools). If a new MAUI app is created with just a WebView in it (which created WKMauiWebView, which is essentially the same as WKWebView), Safari shows no debuggable sessions available.

Other scenarios tests - the same result with no option to debug the session:

• BlazorWebView
• Plain MacCatalyst WKWebView
• MAUI WebView with custom handler with developerExtrasEnabled set

The source for all foud projects is in the following repository:
https://github.com/xamcat/maui-wkwebview-inspect

Steps to Reproduce

1. Create new MAUI App
2. Register WebView on the main page

 <WebView Source="https://www.apple.com"
             VerticalOptions="FillAndExpand"
             HorizontalOptions="FillAndExpand" />

3. Run on Mac with dotnet build -t:Run -f net6.0-maccatalyst
4. Open Safari and navigate to Develop-> <MacName>

Result: No inspectable application message
Expected: Web session created by WebView (WKWebView) is visible in debug tools

Version with bug

6.0 (current)

Last version that worked well

Release Candidate 3 (current)

Affected platforms

macOS

Affected platform versions

maccatalyst 13.1

Did you find any workaround?

No workaround has been found.

Relevant log output

No response

[Eilon]

We tried everything we could to get this working with BlazorWebView on Mac, and we just couldn't get it to work. So it's probably the same problem as the regular .NET MAUI WebView, but we don't know what that is. We got Windows (WebView2), Android, and iOS all working with Dev Tools, but not macOS. But it's interesting to hear that an app built in Xcode has this working, so maybe we can compare what that does to what MAUI is doing, and figure out the difference.

[Eilon]

Also tagging this as area/blazor because this might educate us on how to fix this for Blazor.

[javiercn]

@Eilon do you think we might be missing an entitlement in the app manifest?

[Eilon]

@javiercn I'm not sure. I didn't see any entitlements in the Xcode app, either, unless it's somehow auto-generated in some cases? (Maybe let's say in debug mode?) Or maybe I missed where it is? Also, we did try using entitlements to enable F12 tools but it never worked, and various Internet people had also encountered the same thing, so we always ended up at a dead end.

[alexeystrakh]

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

[TanayParikh]

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

@Eilon we also have #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

[Eilon]

@TanayParikh ah I forgot we had a BlazorWebView-specific bug, so let's keep that, and then this bug will be for MAUI WebView.

That feedback ticket is unfortunately not visible even after I log in with my Apple ID.

[alexeystrakh]

I'm following this guide and have added the Entitlements.plist with the required value and registered it within a property group property CodeSignEntitlements, although it the build logs I don't see it was used by the build:

Target "_CompileEntitlements" in file "/usr/local/share/dotnet/packs/Microsoft.MacCatalyst.Sdk/15.4.402/tools/msbuild/iOS/Xamarin.Shared.targets":
  Building target "_CompileEntitlements" completely.
  No input files were specified.
  Using "CompileEntitlements" task from assembly "/usr/local/share/dotnet/packs/Microsoft.MacCatalyst.Sdk/15.4.402/tools/msbuild/iOS/../iOS/Xamarin.iOS.Tasks.dll".
  Task "CompileEntitlements"
    /usr/local/share/dotnet/packs/Microsoft.MacCatalyst.Sdk/15.4.402/tools/msbuild/iOS/Xamarin.Shared.targets(627,3): warning : Cannot expand $(AppIdentifierPrefix) in Entitlements.plist without a provisioning profile.
    /usr/local/share/dotnet/packs/Microsoft.MacCatalyst.Sdk/15.4.402/tools/msbuild/iOS/Xamarin.Shared.targets(627,3): warning :         
  Done executing task "CompileEntitlements".
  Task "GetFullPath" skipped, due to false condition; ('$(IsMacEnabled)' == 'true' And '$(_CompiledEntitlements)' != '') was evaluated as ('true' == 'true' And '' != '').
  Using "GetFullPath" task from assembly "/usr/local/share/dotnet/packs/Microsoft.MacCatalyst.Sdk/15.4.402/tools/msbuild/iOS/../iOS/Xamarin.iOS.Tasks.dll".
  Task "GetFullPath"
  Done executing task "GetFullPath".
Done building target "_CompileEntitlements" in project "maui-app-webviewtest2.csproj".

I'm using a personal Apple Account and wondering how I can get a key+profile for this. When I do the same via Xcode, it does everything automatically and also (!) says that a provisioning profile is not required:

Because of this, I'm unable to validate if the Entitlement.plist with the get-task-allow helps with the issue.

[rolfbjarne]

Could you zip up and attach the .app from Xcode (that works) and the .app from MAUI (that doesn't)?

[VincentBu]

repro with maui main branch on mac m1

[zengxs]

get-task-allow entitlement does make it work.

I added configuration like below in my csproj file:

<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">
    <CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements>
</PropertyGroup>

The content of the Entitlements.Debug.plist file is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.security.app-sandbox</key>
    <false/>
    <key>com.apple.security.get-task-allow</key>
    <true/>
</dict>
</plist>

Then rebuild and run the app, safari developer tools inspector work fine:

[Redth]

@davidbritch is this something you could add to the conceptual docs?

@dalexsoto in theory we could make a short hand way to do this? Perhaps a property that adds an entitlements file to the build? @rolfbjarne is there a task that merges partial entitlements files like there is for info.plist?

[TanayParikh]

@Redth would adding this enlistment profile to the template be considered?

[davidbritch]

@Redth Yes, can add to the docs. I've created an issue for it.

[julianadormon]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.security.app-sandbox</key>
    <false/>
    <key>com.apple.security.get-task-allow</key>
    <true/>
</dict>
</plist>

@zengxs suggestion did not work for me using Visual Studio Community 2022 for Mac Preview
Version 17.4 Preview (17.4 build 715)

[zengxs]

@julianadormon Sorry for the slow reply.

What is your Xcode and system version? My environment is macOS Monterey 12.5 on Apple Silicon, Xcode 13.4.1.
Do you have the conditions to try it on a new machine? I guess it might be a problem with the system environment.

[rolfbjarne]

@rolfbjarne is there a task that merges partial entitlements files like there is for info.plist?

No, there isn't a way to add a partial entitlements file into the build right now.

[drasticactions]

Trying with Xcode 14.2, On Catalyst, in a Swift App, with the included plist values and setting the developer flag, I can't get it working there either: https://github.com/drasticactions/MauiRepros/tree/main/WebKitTools

It works on iPhone, not Catalyst, and that's using Swift. If we can't get it working with the general tooling, it's probably hard to make it work on .NET too, ya know?

[tstephansen]

This was closed but I don't think the PR fixes the issue. I have made the same changes to my project that were in the updated templates and it still doesn't work (at least on 13.3.1). Here's a few screenshots.

(Debug Entitlements file)

(csproj file with changes included)

(App open and the develop menu open in Safari)

[drasticactions]

@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.

[tstephansen]

Yeah it coincided with the release of 13.3 I think (at least that's when it stopped working for me). Sorry about that! I didn't understand the previous comment (I thought they were trying to debug Maui in Xcode for some reason).

[cs-italy]

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

[drasticactions]

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.

[headintheclouds21]

Has anyone been able to get this working again? I've added the get-task-allow entitlement and followed instructions at https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/webview?view=net-maui-7.0&pivots=devices-maccatalyst with no luck. I'm using macOS 12.6.3 with xcode 14.2. This is a large issue for me and being able to inspect a webview would go a long ways

[tstephansen]

@headintheclouds21 I don't have enough experience working with Xamarin/Maui to get it to work. I'm sure there's a way with the new property that @cs-italy replied with and I've just been debugging on Windows for the time being. It would be great if someone who does know how to implement this could give an example though.

[tstephansen]

@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.

[wadie82]

@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.

[drasticactions]

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

#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)

[wadie82]

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 ?

[Eilon]

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"));

[tstephansen]

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
}

[v-Lily]

@tstephansen

Based on your comment, I tried adding the above code, Mac IOS simulator still doesn't allow in Safari developer tools.

[tstephansen]

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

[v-Lily]

@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.

[gerneio]

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
    }

[ghost]

Hello lovely human, thank you for your comment on this issue. Because this issue has been closed for a period of time, please strongly consider opening a new issue linking to this issue instead to ensure better visibility of your comment. Thank you!

[abivelj]

@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.

[ghost]

Hello lovely human, thank you for your comment on this issue. Because this issue has been closed for a period of time, please strongly consider opening a new issue linking to this issue instead to ensure better visibility of your comment. Thank you!