MAUI Blazor Windows发布版如何打开Chrome控制台排查崩溃问题

MAUI Blazor发布版默认禁用了开发者工具，要打开对应WebView的调试控制台，可以通过以下几种方式实现：

1. 全局启用开发者工具 #

在项目的Program.cs（或MauiProgram.cs）中，配置BlazorWebView选项，强制开启开发者工具，发布版也会生效：

builder.Services.AddMauiBlazorWebView(options =>
{
    // 启用开发者工具
    options.WebViewOptions = new Microsoft.AspNetCore.Components.WebView.WebViewOptions
    {
        EnableDeveloperTools = true
    };
});

配置完成后，尝试再次使用CTRL+SHIFT+C快捷键打开控制台，部分平台可能需要重启应用生效。

2. 添加自定义触发按钮（跨平台通用） #

如果快捷键仍不生效，可以在Blazor页面中添加按钮，通过代码触发控制台：

步骤1：在Razor组件中添加按钮 #

比如在MainLayout.razor中加入：

<button @onclick="OpenDevTools">打开调试控制台</button>

@code {
    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    private async Task OpenDevTools()
    {
        await JSRuntime.InvokeVoidAsync("window.openDevTools");
    }
}

步骤2：在wwwroot/js/app.js中添加JS方法 #

window.openDevTools = function() {
    // 模拟CTRL+SHIFT+C快捷键触发
    const event = new KeyboardEvent('keydown', {
        key: 'C',
        ctrlKey: true,
        shiftKey: true,
        bubbles: true
    });
    document.dispatchEvent(event);
}

3. 平台原生方式（更可靠） #

不同平台的WebView有原生API直接打开开发者工具，针对性实现更稳定：

Windows平台（WebView2） #

在MainPage.xaml中给BlazorWebView添加命名引用：

<BlazorWebView x:Name="MainBlazorWebView" HostPage="wwwroot/index.html" />

然后在MainPage.xaml.cs中添加按钮点击事件：

private void OpenDevTools_Click(object sender, EventArgs e)
{
    if (MainBlazorWebView.WebView is WebView2 webView)
    {
        webView.CoreWebView2?.OpenDevToolsWindow();
    }
}

Android平台 #

同样在MainPage.xaml中命名BlazorWebView，后台代码中：

private void OpenDevTools_Click(object sender, EventArgs e)
{
    if (MainBlazorWebView.WebView is Android.Webkit.WebView androidWebView)
    {
        androidWebView.ShowDevTools();
    }
}

iOS平台 #

iOS需通过Safari远程调试，先在Program.cs中启用开发者选项：

builder.Services.AddMauiBlazorWebView(options =>
{
#if IOS
    options.WebViewOptions.AdditionalWebViewConfiguration = config =>
    {
        if (config is WKWebViewConfiguration wkConfig)
        {
            wkConfig.Preferences.DeveloperExtrasEnabled = true;
        }
    };
#endif
});

随后用Mac上的Safari连接到iOS设备/模拟器，在开发菜单中找到对应应用的WebView，即可查看控制台。

注意事项 #

• 发布版启用开发者工具存在安全风险，调试完成后，记得在正式发布前移除相关代码或关闭EnableDeveloperTools选项。
• 部分平台需开启设备开发者模式才能使用调试工具。

内容的提问来源于stack exchange，提问作者Miha Bogataj