maui icon indicating copy to clipboard operation
maui copied to clipboard

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

Open alexeystrakh opened this issue 2 years ago • 13 comments

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" />
  1. Run on Mac with dotnet build -t:Run -f net6.0-maccatalyst
  2. Open Safari and navigate to Develop-> <MacName>

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

safari-debug-native-mac-app safari-debug-maui-mac-app safari-debug-maccat-mac-app safari-debug-blazor-mac-app

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

alexeystrakh avatar Jun 02 '22 18:06 alexeystrakh

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 avatar Jun 02 '22 20:06 Eilon

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

Eilon avatar Jun 02 '22 20:06 Eilon

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

javiercn avatar Jun 03 '22 09:06 javiercn

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

Eilon avatar Jun 03 '22 16:06 Eilon

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

alexeystrakh avatar Jun 03 '22 19:06 alexeystrakh

@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

TanayParikh avatar Jun 03 '22 22:06 TanayParikh

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

Eilon avatar Jun 03 '22 22:06 Eilon

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:

image

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

alexeystrakh avatar Jun 10 '22 20:06 alexeystrakh

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

rolfbjarne avatar Jun 10 '22 20:06 rolfbjarne

repro with maui main branch on mac m1

VincentBu avatar Jul 12 '22 02:07 VincentBu

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:

image

zengxs avatar Aug 10 '22 03:08 zengxs

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

Redth avatar Aug 10 '22 21:08 Redth

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

TanayParikh avatar Aug 10 '22 21:08 TanayParikh

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

davidbritch avatar Aug 11 '22 07:08 davidbritch

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

julianadormon avatar Aug 13 '22 18:08 julianadormon

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

zengxs avatar Aug 17 '22 07:08 zengxs

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

rolfbjarne avatar Aug 17 '22 15:08 rolfbjarne

This issue has apparently come back. I added the entitlements plist file and the necessary code to the csproj file. This worked before the update to Ventura 13.3 but it is no longer working after the update. Is there a workaround to use the developer tools in the latest version of OSX?

tstephansen avatar Apr 04 '23 17:04 tstephansen

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?

drasticactions avatar Apr 06 '23 03:04 drasticactions

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) CleanShot 2023-04-11 at 15 25 51@2x

(csproj file with changes included) CleanShot 2023-04-11 at 15 26 52@2x

(App open and the develop menu open in Safari) CleanShot 2023-04-11 at 15 23 00@2x

tstephansen avatar Apr 11 '23 19:04 tstephansen

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

drasticactions avatar Apr 12 '23 02:04 drasticactions

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

tstephansen avatar Apr 12 '23 02:04 tstephansen

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

cs-italy avatar Apr 14 '23 06:04 cs-italy

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.

スクリーンショット 2023-04-14 17 10 54

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

drasticactions avatar Apr 14 '23 08:04 drasticactions

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

headintheclouds21 avatar Apr 28 '23 20:04 headintheclouds21

@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 avatar May 01 '23 16:05 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.

CleanShot 2023-05-03 at 13 48 48@2x

tstephansen avatar May 03 '23 17:05 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.

CleanShot 2023-05-03 at 13 48 48@2x

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.

wadie82 avatar May 05 '23 06:05 wadie82

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)

drasticactions avatar May 05 '23 06:05 drasticactions

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 ?

wadie82 avatar May 06 '23 05:05 wadie82