WebView2 系列之-前端 IDE 调试 WebView2 程序
背景
webview2 通常是本机应用的一个组件,也就是说,代码的目标运行环境是本机应用的webview2 组件,而不是不像开发网站项目,目标运行环境是浏览器。
开发工具
开发 webview2 项目中,通常要开启两个 IDE,一个开发后端(本机应用)、一个开发前端,例如我使用的是 Rider 和 WebStorm。
开发 .NET 本机应用推荐使用 Rider 而不是 Visual Studio 2022,原因是 Rider 能让我们的本机应用正常打开 9222 的远程调试端口。
后端关键代码
后端要先给webview2控件设置环境参数,设置debug模式下开启远程调试端口 9222。
#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
内容如下:
{
// 使用 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 可以直接查看控制台等调试数据