共用方式為


遠端除錯HoloLens 2 WebView2 WinUI 2 (UWP) 應用程式

要使用 Microsoft Edge DevTools 除錯 WebView2 WinUI 2 (UWP) 應用程式,請使用遠端除錯。 遠端除錯是 WebView2 WinUI 2 (UWP) 應用程式所必需的,因為目前內建的 DevTools 無法在已簽署的 WebView2 WinUI 2 (UWP) 應用程式中啟動。

HoloLens 2 上的 WebView2 以及 Unity 的 WebView 外掛都處於預覽階段,並在正式推出前可能會有所變動。

WebView2 與 WebView2 外掛僅支援執行 Windows 11 更新的 HoloLens 2 裝置。 更多資訊請參閱更新 HoloLens 2

遠端將 DevTools 連接到 HoloLens 2 WebView2 WinUI 2 (UWP) 應用程式

Microsoft遠端將 Edge DevTools 遠端連接到 HoloLens 2 WebView2 WinUI 2 (UWP) 應用程式,方法如下:

  1. 在 Microsoft Edge 中,請前往 edge://inspect使用邊緣開發者工具檢查頁面開啟:

    DevTools 檢查工具頁面

  2. 啟用裝置入口網站:打開 Windows 設定,選擇開發者安全>更新 &,然後開啟裝置入口開關

    啟用裝置入口網站

    在使用Ethernet連線>時,請注意用於遠端除錯連線的 URL。

  3. 從 Microsoft Store 在您的 HoloLens 2 裝置上安裝 Remote Tools for Microsoft Edge

  4. 在 Microsoft Edge 中,點到你之前提到的裝置入口網站網址。 請確認 安全設定 頁面是否載入 (Windows 裝置入口網站 分頁) :

    在「Windows 裝置入口網站」標籤中的「確認安全設定」頁面

  5. 如果你只在除錯本地執行的應用程式,可以選擇 「繼續」按鈕,使用未加密連線

    或者,如果你沒有在本地執行應用程式,或是需要透過 HTTPS 連線,請選擇 「配置安全連線 」連結,然後依照你被導向的頁面步驟操作。

  6. 確認你已被導向應用程式 管理員:Windows 裝置入口網站 頁面:

    裝置入口網站

  7. 前往 http://<Device Portal URL>/msedge 確認 Microsoft Edge 遠端工具是否正常運作。 該頁面載入一個空清單: [],除非有可遠端除錯的應用程式在執行。

  8. 設定你的 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,位於 一個 #endif 封裝現有 SetEnvironmentVariable 陳述句的 下:

    瀏覽器參數遠端除錯

  9. 在您的 HoloLens 2 裝置上啟動應用程式。

  10. 前往 http://<Device Portal URL>/msedge,例如 http://localhost:50080/msedge,並確保你的 WebView2 實例出現在列表中:

    可除錯的 WebView2 實例

  11. 移至edge://inspect。 在 「連接到遠端 Windows 裝置 」的文字框中,輸入 http://<Device Portal URL>,例如 http://localhost:50080,然後點選 「連接裝置」。

  12. 確認你能成功連線,這樣你的可除錯的 WebView2 控制項(名為 Edge)會被列在你的機器名稱下:

    連接 HoloLens 2 的 WebView2

  13. Edge WebView2 控制項的底部,點擊 檢查 連結。 Microsoft Edge DevTools 開啟 WebView2 控制項:

    DevTools 檢查視窗

現在你可以用 Microsoft Edge DevTools 檢查並除錯 HoloLens 2 WebView2 WinUI 2 (UWP) 應用程式中的 WebView2 控制項。

另請參閱