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:

1. Navigieren Sie in Microsoft Edge zu edge://inspect. Die Seite Mit Edge-Entwicklertools untersuchen wird geöffnet:

   

2. Aktivieren Sie den Entwicklermodus auf Xbox. Weitere Informationen finden Sie unter Aktivierung des Xbox One-Entwicklermodus.

3. 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:

   

4. Klicken Sie auf die Schaltfläche Mit einer ungesicherten Verbindung fortfahren . Ein SSL-Zertifikatfehler wird angezeigt, NET::ERR__CERT_AUTHORITY_INVALID:

   

5. Klicken Sie auf die Schaltfläche Erweitert. Die Meldung "Der Server konnte nicht nachweisen..." wird angezeigt:

   

6. 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:

   

7. Wechseln Sie zu https://<System IP>:11443/config/rootcertificate, wobei <System IP> durch die IP-Adresse Ihres Xbox System-Betriebssystems ersetzt wird. Dadurch wird eine rootcertificate.cer Datei heruntergeladen:

   

8. Öffnen Sie die heruntergeladene rootcertificate.cer Datei. Ein Sicherheitswarnungsdialogfeld wird geöffnet:

   

9. Klicken Sie auf die Schaltfläche Öffnen . Das Dialogfeld Zertifikat wird geöffnet:

   

10. Klicken Sie auf die Schaltfläche Zertifikat installieren . Das Dialogfeld Willkommen beim Zertifikatimport-Assistenten wird geöffnet:

    

11. Wählen Sie die Optionsschaltfläche Aktueller Benutzer aus, und klicken Sie dann auf die Schaltfläche Weiter . Der Zertifikatimport-Assistent wird geöffnet:

    

12. 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.

13. Klicken Sie auf die Schaltfläche Weiter . Das Dialogfeld Sicherheitswarnung wird geöffnet:

    

14. Klicken Sie auf die Schaltfläche Ja .

15. Starten Sie Microsoft Edge neu.

16. 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:

    

17. 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 des CoreWebView2 instance und vor dem Festlegen der WebView2.Source -Eigenschaft oder dem Aufrufen der WebView2.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, der Browser() eine vorhandene SetEnvironmentVariable Anweisung umschließt:

    

18. Stellen Sie Ihre App mithilfe von Xbox Device Portal auf Xbox bereit, und starten Sie ihre App.

19. Gehen Sie zu edge://inspect.

20. 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 .

21. 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:

    

22. 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.

Siehe auch

• Remotedebuggen von WebView2 WinUI 2-Apps (UWP)