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

發行項
05/16/2024

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

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

從遠端將 Microsoft Edge DevTools 附加至 Xbox WebView2 WinUI 2 (UWP) 應用程式，如下所示：

在 Microsoft Edge 中，移至 edge://inspect。 [ 使用 Edge 開發人員工具檢查 ] 頁面隨即開啟：
在 Xbox 上啟用開發人員模式。請參閱 Xbox One 開發人員模式啟用。
在 Microsoft Edge 中，移至 https://<System IP>:11443，其中 <System IP> 會由您的 Xbox 系統 OS IP 取代。 [ 確認安全性設定] 頁面會 顯示在 [Windows 裝置入口網站] 索 引標籤中：
按兩下 [ 繼續使用不安全的連線] 按鈕。 SSL 憑證錯誤隨即出現， NET：：ERR__CERT_AUTHORITY_INVALID：
按兩下 [ 進階 ] 按鈕。隨即顯示訊息：「伺服器無法證明...」：
按兩下 [ 繼續 (<System IP> 不安全的) ] 連結，其中 <System IP> 會由您的 Xbox 系統 OS IP 取代。 Xbox Device Portal 隨即開啟：
移至 https://<System IP>:11443/config/rootcertificate，其中 <System IP> 會由您的 Xbox 系統 OS IP 取代。這會 rootcertificate.cer 下載檔案：
開啟下載的 rootcertificate.cer 檔案。安全性警告對話框隨即開啟：
按兩下 [ 開啟] 按鈕。 [ 憑證 ] 對話框隨即開啟：
按兩下 [ 安裝憑證] 按鈕。 [ 歡迎使用憑證匯入 精靈] 對話框隨即開啟：
選取 [ 目前使用者 ] 選項按鈕，然後按下 [ 下一步] 按鈕。 [憑證匯入精靈] 隨即開啟：
選取 [ 將所有憑證放在下列存放區] 選項，按兩下 [ 瀏覽 ] 按鈕，然後選取 [ 受信任的跟證書授權單位]。
按兩下 [ 下一步] 按鈕。 [安全性警告] 對話框隨即開啟：
按兩下 [ 是] 按鈕。
重新啟動 Microsoft Edge。
移至 https://<System IP>:11443，其中 <System IP> 會由您的 Xbox 系統 OS IP 取代，並確認連線已指出為安全 (也就是 HTTPS URL) ：
在您的應用程式專案中，設定下列變數，以設定 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：
使用 Xbox Device Portal 將您的應用程式部署至 Xbox，並啟動您的應用程式。
移至edge://inspect。
在 [ 連線到遠端 Windows 裝置 ] 文字框中，輸入 https://<System IP>:11443，其中 <System IP> 會由您的 Xbox 系統 OS IP 取代，然後按兩下 [ 連線到裝置] 按鈕。
確認您可以成功連線，讓名為 Edge 的可偵錯 WebView2 控制件列在您的電腦名稱下：
在 Edge WebView2控制項專案的底部，按一下檢查連結。 Microsoft WebView2 控件開啟 Edge DevTools：