Remotedebuggen von Xbox WebView2 WinUI 2-Apps (UWP)
Um Microsoft Edge DevTools zum Debuggen einer WebView2 WinUI 2(UWP)-App zu verwenden, verwenden Sie Remotedebuggen. Remotedebuggen ist für WebView2 WinUI 2(UWP)-Apps erforderlich, da die integrierten DevTools derzeit nicht in einer store-signierten WebView2 WinUI 2 (UWP)-App gestartet werden können.
Remoteanfügen von DevTools an eine Xbox WebView2 WinUI 2(UWP)-App
Fügen Sie Microsoft Edge DevTools wie folgt remote an eine Xbox WebView2 WinUI 2(UWP)-App an:
Navigieren Sie in Microsoft Edge zu
edge://inspect
. Die Seite Mit Edge-Entwicklertools untersuchen wird geöffnet:Aktivieren Sie den Entwicklermodus auf Xbox. Weitere Informationen finden Sie unter Aktivierung des Xbox One-Entwicklermodus.
Wechseln Sie in Microsoft Edge zu
https://<System IP>:11443
, wobei<System IP>
durch die IP-Adresse Ihres Xbox-Systembetriebssystems ersetzt wird. Die Seite Sicherheitseinstellungen bestätigen wird auf der Registerkarte Windows-Geräteportal angezeigt:Klicken Sie auf die Schaltfläche Mit einer ungesicherten Verbindung fortfahren . Ein SSL-Zertifikatfehler wird angezeigt, NET::ERR__CERT_AUTHORITY_INVALID:
Klicken Sie auf die Schaltfläche Erweitert. Die Meldung "Der Server konnte nicht nachweisen..." wird angezeigt:
Klicken Sie auf den Link Continue to (unsafe) (Weiter zu
<System IP>
(unsicher) , wobei<System IP>
durch die IP-Adresse Ihres Xbox-Systembetriebssystems ersetzt wird. Das Xbox-Geräteportal wird geöffnet:Wechseln Sie zu
https://<System IP>:11443/config/rootcertificate
, wobei<System IP>
durch die IP-Adresse Ihres Xbox System-Betriebssystems ersetzt wird. Dadurch wird einerootcertificate.cer
Datei heruntergeladen:Öffnen Sie die heruntergeladene
rootcertificate.cer
Datei. Ein Sicherheitswarnungsdialogfeld wird geöffnet:Klicken Sie auf die Schaltfläche Öffnen . Das Dialogfeld Zertifikat wird geöffnet:
Klicken Sie auf die Schaltfläche Zertifikat installieren . Das Dialogfeld Willkommen beim Zertifikatimport-Assistenten wird geöffnet:
Wählen Sie die Optionsschaltfläche Aktueller Benutzer aus, und klicken Sie dann auf die Schaltfläche Weiter . Der Zertifikatimport-Assistent wird geöffnet:
Wählen Sie die Option Alle Zertifikate im folgenden Speicher platzieren aus, klicken Sie auf die Schaltfläche Durchsuchen , und wählen Sie dann Vertrauenswürdige Stammzertifizierungsstellen aus.
Klicken Sie auf die Schaltfläche Weiter . Das Dialogfeld Sicherheitswarnung wird geöffnet:
Klicken Sie auf die Schaltfläche Ja .
Starten Sie Microsoft Edge neu.
Wechseln Sie zu
https://<System IP>:11443
, wobei<System IP>
durch die IP-Adresse Ihres Xbox System-Betriebssystems ersetzt wird, und überprüfen Sie, ob die Verbindung als sicher (d. b. eine HTTPS-URL) gekennzeichnet ist:Legen Sie in Ihrem App-Projekt die folgende Variable fest, um Ihre WebView2 WinUI 2(UWP)-App für das Remotedebuggen zu konfigurieren.
Um das Remotedebuggen zu aktivieren, muss eine Umgebungsvariable in Ihrem Projekt festgelegt werden. Diese Variable muss vor dem Erstellen der
CoreWebView2
-Instanz und vor dem Festlegen derWebView2.Source
-Eigenschaft oder dem Aufrufen derWebView2.EnsureCoreWebView2Async
-Methode festgelegt werden."WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging"
Wenn Sie beispielsweise die WebView2-Beispiel-UWP-App verwenden, können Sie die Umgebungsvariable festlegen, indem Sie die folgende Zeile in der
Browser.xaml.cs
Datei hinzufügen:Environment.SetEnvironmentVariable("WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS", "--enable-features=msEdgeDevToolsWdpRemoteDebugging");
Die Zeile ist in diesem Screenshot im Konstruktor unter einem
#endif
33 nummeriert, derBrowser()
eine vorhandeneSetEnvironmentVariable
Anweisung umschließt:Stellen Sie Ihre App mithilfe von
Xbox Device Portal
auf Xbox bereit, und starten Sie ihre App.Gehen Sie zu
edge://inspect
.Geben Sie im Textfeld Verbindung mit einem Windows-Remotegerät herstellen ein
https://<System IP>:11443
, wobei<System IP>
durch die IP-Adresse des Xbox System-Betriebssystems ersetzt wird, und klicken Sie dann auf die Schaltfläche Verbindung mit Gerät herstellen .Stellen Sie sicher, dass Sie erfolgreich eine Verbindung herstellen können, sodass Ihr debugfähiges WebView2-Steuerelement namens Edge unter ihrem Computernamen aufgeführt ist:
Klicken Sie am unteren Rand des Edge WebView2-Steuerelementeintrags auf den Link untersuchen . Microsoft Edge DevTools wird für das WebView2-Steuerelement geöffnet:
Jetzt können Sie Microsoft Edge DevTools verwenden, um das WebView2-Steuerelement in Ihrer Xbox WebView2 WinUI 2 (UWP)-App zu untersuchen und zu debuggen.