遠端偵錯桌面 WebView2 WinUI 2 (UWP) 應用程式

發行項
01/16/2024

若要使用 Microsoft Edge DevTools 來偵錯 WebView2 WinUI 2 (UWP) 應用程式，請使用遠端偵錯。 WebView2 WinUI 2 (UWP) 應用程式需要遠端偵錯，因為目前無法在市集簽署的WebView2 WinUI 2 (UWP) 應用程式內啟動內建的DevTools。

從遠端將 DevTools 附加至桌面 WebView2 WinUI 2 (UWP) 應用程式

將 Microsoft Edge DevTools 遠端連結至桌面 WebView2 WinUI 2 (UWP) 應用程式，如下所示：

在 Microsoft Edge 中，移至 edge://inspect。 [ 使用 Edge 開發人員工具檢查 ] 頁面隨即開啟：
啟用 Developer Mode：開啟 [Windows 設定]，選 取 [隱私權] & [安全>性] [適用於開發人員]，然後開啟 [ 開發人員模式 ] 切換。
在相同的 [ 設定] 頁面中，開啟 [裝置入口網站 ] 切換：

如果您的作業系統不是最新狀態，您可能會在 [設定] 視窗中收到一則訊息：「在 Windows Update 中找不到 Windows 開發人員模式套件，因此無法使用遠端部署和 Windows 裝置入口網站。深入瞭解。」
如果您收到這類訊息，請將操作系統 (OS) 更新為最新版本，然後開啟 [裝置入口網站] 切換。
當系統提示 您安裝 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");
```
此螢幕快照中的行編號為 33，在建構函式中Browser()，位於包裝現有SetEnvironmentVariable語句的下方#endif：
啟動您的應用程式。
移至 http://<Device Portal URL>/msedge，例如 http://localhost:50080/msedge，並確定您的 WebView2 實體出現在清單中：
移至edge://inspect。在 [ 連線到遠端 Windows 裝置 ] 文字框中，輸入 http://<Device Portal URL>，例如 http://localhost:50080，然後按兩下 [ 連線到裝置]。
確認您可以成功連線，讓名為 Edge 的可偵錯 WebView2 控制件列在您的電腦名稱下：
在 Edge WebView2控制項專案的底部，按一下檢查連結。 Microsoft Edge DevTools 會針對 WebView2 控件開啟：