HybridWebView: browser dev tools not working

[mallibone]

Description

I currently am experiencing an issue in a small Vue app when integrating it into the hybrid web view. According to this issue #22305 the dev tools should be enabled by default. I do not see the app popping up under the Develop Safari Menu. Did see the the app showing when using the latest MAUI Blazor Hybrid template.

Steps to Reproduce

Create a new MAUI App. Add a HybridWebView with a hello world Vue app (or basic HTML/JS provided in release notes of .NET 9 Preview 7). Check Develop Menu of Safari. No App appears under my current machine.

Link to public reproduction project repository

No response

Version with bug

9.0.0-preview.7.24407.4

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

macOS

Affected platform versions

macOS Sonoma 14.6.1

Did you find any workaround?

No

Relevant log output

No response

[github-actions[bot]]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• .NET 8: Mac Cat app with WebView not inspectable in Safari Dev Tools (#18243), similarity score: 0.79

Closed similar issues:

• MAUI WebView doesn't allow to web session to inspected in Safari developer tools (Mac Catalyst) (#7706), similarity score: 0.77
• DevTools not working (#17476), similarity score: 0.76
• Web Inspector cannot use app (#16611), similarity score: 0.76
• Blazor Hybrid not working on MacOS 15.0 [Potential fix] (#23390), similarity score: 0.75

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[mallibone]

Seems like this is related to the answer provided in #18243

After adding the following lines to my CreateMauiApp I can inspect my app with the Safari dev tools:

#if MACCATALYST
       Microsoft.Maui.Handlers.HybridWebViewHandler.Mapper.AppendToMapping("Inspect", (handler, view) =>
	       {
		       if (OperatingSystem.IsMacCatalystVersionAtLeast(16, 4))
		       {
			       handler.PlatformView.Inspectable = true;
			       // For older versions .NET Mac Versions that don't include the Inspectable field.
			       // handler.PlatformView.SetValueForKey(Foundation.NSObject.FromObject(true), new Foundation.NSString("inspectable"));
		       }
       });
#endif

Don't know if this makes it a duplicate since one is related to WebView and my issue would still be with HybridWebView?

[drasticactions]

https://github.com/dotnet/maui/pull/19909 I fixed this for BlazorWebView, but AFAIK, WebView, BlazorWebView, and HybridWebView are different controls with different implementations. My fix for the original one was for BlazorWebView. A similar thing would need to be done for HybridWebView.

So AFAIK this wouldn't be a dupe.

[PureWeen]

@Eilon thoughts?

[Eilon]

Hmm I'll have to take a look. Pretty sure I used the Safari Dev Tools the other day while debugging HybridWebView. I'll try again.

[Eilon]

OK I do see the Safari Dev Tools showing up, but they're empty. So it knows it's enabled, but it doesn't show any of the contents of the web view being inspected (no elements, no requests, etc.). The code for enabling this in both BlazorWebView and HybridWebView at first glance appears to be identical... so something weird is happening.

[Eilon]

OK, the code if in fact identical, except for one minor detail: in HybridWebView the code that sets up the dev tools sets everything up correctly, and then doesn't use all the configuration logic that it set up! 😜

[Eilon]

Alright confirmed that the problem is PEBKAC! Fix will be submitted soon!

[Eilon]

PR here: #24679

@mallibone thanks for the report on this! It was such a silly bug!

[mallibone]

Cool - thanks for taking the time. Looking forward to using it in an upcoming .NET release 😃

[jfversluis]

Fixed by #24679