Blazor Desktop dev tools enablement

[Eilon]

Check that the debugging experience of content in the WebView works as expected on each platform

• Can attach VS debugger (VS Win, VS Mac, VS Code) Done
• Can use browser-based debugger from Edge, Chrome, Safari on each platform Done (Open dev tools by focusing inside the webview and pressing ctrl+shift+i or cmd+shift+i)
• Consider defaults for whether F12 tools are enabled by default (e.g. Debug vs. Release?), whether we should abstract this presumably common setting (On, Off, Auto)

[ghost]

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[Eilon]

Some details on what I think this work entails:

1. Consider smart defaults for whether dev tools are enabled in the app. For example, switch on debug/release builds (somehow) to set whether dev tools are enabled.
2. Have there be a setting on "something" (the BlazorWebView control itself?) to set bool? EnableDevTools { get; set; } (force enable, force disable, null=default/auto)
3. Make sure dev tools actually work on all platforms (.NET MAUI Android/WinUI/iOS/MacCatalyst, WPF, WinForms). I think right now it works fine with Android + all Windows, but not on iOS/MacCatalyst.

[javiercn]

I think we need a few things here:

• What are the experiences we expect to work. For example:
  • Should I be able to debug JavaScript code on the webview inside Visual Studio?
  • Should I be able to open the DevTools and debug code there?
• Steps to get this to work on each individual platform.
  • Maui
    • Android Emulator
    • Android Device
    • Windows
    • iOS Emulator
    • iOS Device
    • Mac
  • Winforms/WPF
• Are there any tooling integrations we need to engage with partners to enable?

[Eilon]

I think focusing this issue on using browser dev tools is all we need to focus on here. Once that works, I think everything else can work. That's all the WebView components can do anyway, and I think all other tools plug into the same system.

[javiercn]

I think focusing this issue on using browser dev tools is all we need to focus on here. Once that works, I think everything else can work.

I agree, but would we want something like F5 and setting a breakpoint in JS in Visual Studio to work? That requires VS to attach the debugger (through the dev tools in chrome for example)

[Eilon]

But with Blazor why would you want to set a breakpoint in JS code?? Just kidding, yeah, that sounds reasonable. But probably less important than F12 tools working.

[javiercn]

But with Blazor why would you want to set a breakpoint in JS code?? Just kidding, yeah, that sounds reasonable. But probably less important than F12 tools working.

I think this can be enabled in parallel. We already are able to do this for Android Emulator (edge://devices/inspect) so VS should be able to connect to it too.

[Eilon]

Some docs from Mobile Blazor Bindings in case it helps: https://docs.microsoft.com/mobile-blazor-bindings/advanced/debug-hybrid-apps

[TanayParikh]

I think focusing this issue on using browser dev tools is all we need to focus on here.

This seems related to:

#2057 (comment)

and

dotnet/docs-maui#281

[javiercn]

WRT to iOS simulator there is nothing to do/configure. These are the steps I followed to debug on the iOS simulator:

• With the application running on the simulator
• Open Safari on Mac OS
• Click on Develop -> (<> Simulator) -> 0.0.0.0
• The iOS simulator will open and you can interact with the page on the browser tools.

[TanayParikh]

• (Open dev tools by focusing inside the webview and pressing ctrl+shift+i or cmd+shift+i)

Doesn't work in Mac Catalyst apps: #5022

[javiercn]

cfc3fab