远程调试桌面 WebView2 WinUI 2 (UWP) 应用

项目
12/08/2023

若要使用 Microsoft Edge DevTools 调试 WebView2 WinUI 2 (UWP) 应用，请使用远程调试。 WebView2 WinUI 2 (UWP) 应用需要远程调试，因为目前，内置 DevTools 无法在应用商店签名的 WebView2 WinUI 2 (UWP) 应用中启动。

将 DevTools 远程附加到桌面 WebView2 WinUI 2 (UWP) 应用

将 Microsoft Edge DevTools 远程附加到桌面 WebView2 WinUI 2 (UWP) 应用，如下所示：

在 Microsoft Edge 中，转到 edge://inspect。此时会打开 “使用 Edge 开发人员工具进行检查” 页：
启用Developer Mode：打开“Windows 设置”，选择“面向开发人员的隐私 & 安全性>”，然后打开“开发人员模式”切换。
在同一 “设置” 页中，打开 “设备门户 ”切换：

如果你的操作系统不是最新的，你可能会在“设置”窗口中收到一条消息：“在Windows 更新找不到 Windows 开发人员模式包，因此远程部署和 Windows 设备门户不可用。了解详细信息。”
如果收到此类消息，请将操作系统 (操作系统) 更新为最新版本，然后打开 设备门户 切换。
当系统提示 安装 Windows 开发人员模式包时，单击“ 是”：

安装完成后，请注意将用于远程调试连接的 URL。若要查找此 URL，请展开 “设备门户 ”下拉列表。在这种情况下，将使用的设备门户 URL 为 http://localhost:50080：
从 Microsoft Store 安装 Microsoft Edge 远程工具。
在 Microsoft Edge 中，转到前面提到的设备门户 URL。验证是否已在 Windows 设备门户选项卡中 (加载“确认安全设置”页，) ：
如果只调试本地运行的应用，则可以选择“ 使用不安全的连接继续 ”按钮。

或者，如果未在本地运行应用，或者需要通过 HTTPS 进行连接，请选择 “配置安全连接” 链接，然后按照重定向到的页面中的步骤进行操作。
验证是否已重定向到 “应用管理器：Windows 设备门户 ”页：
转到 http://<Device Portal URL>/msedge 并验证 Microsoft Edge 的远程工具是否正常运行。页面将加载一个空列表： []，除非有一个正在运行且可由远程工具调试的应用程序。
配置 WebView2 WinUI 2 (UWP) 应用进行远程调试：

若要启用远程调试，必须在项目中设置环境变量。必须在创建 CoreWebView2 实例之前以及设置属性或调用方法之前设置 WebView2.Source 此 WebView2.EnsureCoreWebView2Async 变量。

设置以下变量：
```
"WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging"
```
例如，如果使用的是 WebView2 示例 UWP 应用，可以通过在文件中添加以下行 Browser.xaml.cs 来设置环境变量：
```
Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging");
```
此屏幕截图中的构造函数中的Browser()行编号为 33，位于包装现有SetEnvironmentVariable语句的下方#endif：
启动应用。
转到 http://<Device Portal URL>/msedge，例如 http://localhost:50080/msedge，并确保 WebView2 实例显示在列表中：
转到 edge://inspect。在 “连接到远程 Windows 设备 ”文本框中，输入 http://<Device Portal URL>，例如 http://localhost:50080，然后单击“ 连接到设备”。
验证是否可以成功连接，以便在计算机名称下列出可调试的 WebView2 控件（名为 Edge）：
在 Edge WebView2 控件项的底部，单击检查链接。为 WebView2 控件打开 Microsoft Edge DevTools：