WebView2 系列之-前端 IDE 调试 WebView2 程序

背景

webview2 通常是本机应用的一个组件，也就是说，代码的目标运行环境是本机应用的webview2 组件，而不是不像开发网站项目，目标运行环境是浏览器。

开发工具

开发 webview2 项目中，通常要开启两个 IDE，一个开发后端（本机应用）、一个开发前端，例如我使用的是 Rider 和 WebStorm。

开发 .NET 本机应用推荐使用 Rider 而不是 Visual Studio 2022，原因是 Rider 能让我们的本机应用正常打开 9222 的远程调试端口。

后端关键代码

后端要先给webview2控件设置环境参数，设置debug模式下开启远程调试端口 9222。

cs 复制代码

#if DEBUG 
var options = new CoreWebView2EnvironmentOptions(language: "zh");
options.AdditionalBrowserArguments = "--remote-debugging-port=9222";//开启调试
#endif         
var env = await CoreWebView2Environment.CreateAsync(null, userDataFolder, options);

添加注册表

在如下注册表路径HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments，在AdditionalBrowserArguments 右键新建一个字符串值 * ，他的值为--remote-debugging-port=9222。设置完的结果如下图所示。

前端调试配置

前端 IDE 可以是 webstorm，也可以是 vscode.

webstorm 配置

按下图顺序，添加一个调试配置，选择附加到Node.js/Chrome，注意主机填前端项目 dev 的地址，端口号是前面配置的远程调试端口9222。

vscode 配置

vscode 点击左侧调试按钮，创建一个配置文件 launch.json 内容如下：

json 复制代码

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "port": 9222, 
      "request": "attach",
      "name": "debug webview2",
      // "runtimeExecutable": "D:\Code\DotNet\2024\Wpf-Webview2-Template\Wpf-Webview2-Template\bin\Debug\net6.0-windows/Wpf-Webview2-Template.exe",
      // "useWebView": true,
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

此 json 配置内容可以参考微软文档：使用 Visual Studio Code 调试 WebView2 应用 - Microsoft Edge Developer documentation | Microsoft Learn

注释部分是用于启动webview2程序的路径，用于"request"设置为"launch"模式时使用，此模式允许 VScode 启动编译好的 wpf + webview2 程序。

但是实测，遇到需要管理员权限的 wpf + webview2 程序，vscode 无法正常启动。因此推荐使用"attach"附加模式。

什么是附加调试

附加调试模式的意思就是先启动开启了远程调试端口的wpf程序，IDE 会把调试器附加到它上面。

调试

调试用 webstorm 演示。

启动 WPF 程序，启动前端程序，然后点击 debug 按钮

在需要调试的代码左侧打上断点，在前端页面执行操作。

可以看到，webstorm 中已经捕获了断点，接下来方便地调试代码了。

webstorm 可以直接查看控制台等调试数据