Freigeben über


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:

    DevTools Inspect-Hilfsprogrammseite

  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:

    Seite

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

    SSL-Fehler

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

    Erweiterte Option

  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:

    Xbox-Geräteportal

  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:

    Stammzertifikatdatei, die im Dialogfeld

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

    Dialogfeld

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

    Dialogfeld

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

    Dialogfeld

  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:

    Zertifikatimport-Assistent

  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:

    Dialogfeld

  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:

    Schützen von XDP

  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 der CoreWebView2 -Instanz 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:

    Remotedebuggen von Browserargumenten

  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:

    Edge Inspect Xbox

  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:

    DevTools Inspect Xbox

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