DevTools not working

[AndreaLabeljoy]

Description

HI all and thank you for this great resource.

I've been suing it for a few days now but I cannot get it to show the DevTools Window, Even the demo on VS 2022 on Win 11 does not work.

If I use a standard WebView I'm able to get it to show the DevTools window using this approach:

Am I missing something?

BTW, my MAUI test project works fine even under Mac.

Thank you.

Steps to Reproduce

No response

Link to public reproduction project repository

No response

Version with bug

7.0.92

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

7.0.92

Affected platforms

Windows

Affected platform versions

All platoforms

Did you find any workaround?

-

Relevant log output

-

[Eilon]

Hi @AndreaLabeljoy can you open the Dev Tools manually by clicking anywhere in the WebView and pressing F12?

[AndreaLabeljoy]

Hi @Eilon, yes I can! Thank you, I somehow I missed that. I misunderstood the meaning of EnableWebDevTools = true, by thinking that it was a way to open the devtools programmatically.

BTW on Mac I couldn't get it to work, even by using the Chrome shortcut Option + ⌘ + J.

[Eilon]

Hi @AndreaLabeljoy , yeah, the setting merely enables the dev tools, it doesn't open them automatically. For example, you probably want dev tools enabled while working on your app in Debug mode, but not when you publish your Release mode app to an app store (I mean, you could, but it's quite unusual!).

To enable browser dev tools on Mac, check out the Blazor Hybrid docs here: https://learn.microsoft.com/aspnet/core/blazor/hybrid/developer-tools?view=aspnetcore-7.0&pivots=macos, but ignore the Blazor-specific settings such as calling AddBlazorWebViewDeveloperTools() (it has no effect on a non-Blazor WebView control). But you'll need to set the Entitlements values and follow other steps.

[AndreaLabeljoy]

Hi @Eilon, thank you for the detailed explanation.

As I'm able to see the devtools in Windows, my problems are basically solved. Still if I may suggest, a way to open it programmatically would be very helpful.

As far as Mac goes, still no luck. This is what I did:

• I added the Entitlements.Debug.plist file and added the com.apple.security.get-task-allow boolvalue and set it to true.
• I referenced the Entitlements file in the project file.

Nothing shows when pressing F12, nor when trying with the Chrome shortcut Option + ⌘ + J.

[AndreaLabeljoy]

Hi again, a little update.

I was able to inspect using the Safari devtools, by following the instructions found in this post.

All I had to do was adding this, no Entitlements file implemented in my case:

private void MainPage_Loaded(object sender, EventArgs e)
        {

#if DEBUG && MACCATALYST13_3_OR_GREATER
            if (_webViewMenu.Handler.PlatformView is WKWebView view)
            {
                view.SetValueForKey(NSObject.FromObject(true), new NSString("inspectable"));
            }
#endif
        }

[Eilon]

Hi @Eilon, thank you for the detailed explanation.

As I'm able to see the devtools in Windows, my problems are basically solved. Still if I may suggest, a way to open it programmatically would be very helpful.

As far as Mac goes, still no luck. This is what I did:

• I added the Entitlements.Debug.plist file and added the com.apple.security.get-task-allow boolvalue and set it to true.
• I referenced the Entitlements file in the project file.

Nothing shows when pressing F12, nor when trying with the Chrome shortcut Option + ⌘ + J.

On macOS the WebView is based on Safari, so I think you have to use Safari's Dev Tools for it.

It's up to each platform's WebView whether they have a way to auto-open the Dev Tools. I know on Windows it does, but I'm not sure about elsewhere. For example, on Android and iOS it's unlikely to have that functionality because the DevTools run on the host OS and not within the emulator/simulator/device.

I'm glad you got it working!