Remotedebuggen von WebView2 WinUI 2-Apps (UWP)

Artikel
12/08/2023

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 WebView2 WinUI 2-Desktop-App (UWP)

Fügen Sie Microsoft Edge DevTools wie folgt remote an eine WebView2 WinUI 2-Desktop-App (UWP) an:

Navigieren Sie in Microsoft Edge zu edge://inspect. Die Seite Mit Edge-Entwicklertools untersuchen wird geöffnet:
Aktivieren Developer Mode: Öffnen Sie Windows-Einstellungen, wählen Sie Datenschutz & Sicherheit>für Entwickler aus, und aktivieren Sie dann die Umschaltfläche Entwicklermodus .
Aktivieren Sie auf derselben Seite Einstellungen die Umschaltfläche Geräteportal :

Wenn Ihr Betriebssystem nicht auf dem neuesten Stand ist, wird im Fenster Einstellungen möglicherweise eine Meldung angezeigt: "Das Windows-Entwicklermoduspaket konnte in Windows Update nicht gefunden werden, sodass die Remotebereitstellung und das Windows-Geräteportal nicht verfügbar sind. Weitere Informationen."
Wenn Sie eine solche Meldung erhalten, aktualisieren Sie Ihr Betriebssystem auf die neueste Version, und aktivieren Sie dann die Umschaltfläche Geräteportal .
Wenn Sie zum Installieren des Windows-Entwicklermoduspakets aufgefordert werden, klicken Sie auf Ja:

Notieren Sie sich nach Abschluss der Installation die URL, die für die Remotedebugverbindung verwendet wird. Um diese URL zu finden, erweitern Sie die Dropdownliste Geräteportal . In diesem Fall lautet http://localhost:50080die url des Geräteportals, die verwendet wird:
Installieren Sie Remotetools für Microsoft Edge aus dem Microsoft Store.
Navigieren Sie in Microsoft Edge zu der zuvor notierten Geräteportal-URL. Vergewissern Sie sich, dass die Seite Sicherheitseinstellungen bestätigen geladen ist (auf der Registerkarte Windows-Geräteportal ):
Wenn Sie nur Apps debuggen, die lokal ausgeführt werden, können Sie die Schaltfläche Mit einer ungesicherten Verbindung fortfahren auswählen.

Wenn Sie die App nicht lokal ausführen oder eine Verbindung über HTTPS herstellen müssen, wählen Sie den Link Sichere Verbindung konfigurieren aus, und führen Sie dann die Schritte auf der Seite aus, zu der Sie weitergeleitet werden.
Vergewissern Sie sich, dass Sie zur Seite Apps-Manager: Windows-Geräteportal umgeleitet werden:
Wechseln Sie zu , http://<Device Portal URL>/msedge und überprüfen Sie, ob Remotetools für Microsoft Edge funktionieren. Die Seite lädt eine leere Liste: [], es sei denn, es wird eine Anwendung ausgeführt, die von Remotetools debuggt werden kann.
Konfigurieren Sie Ihre WebView2 WinUI 2 (UWP)-App für das Remotedebuggen:

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.

Legen Sie die folgende Variable fest:
```
"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:
Starten Sie Ihre App.
Wechseln Sie zu , zhttp://localhost:50080/msedge. B. http://<Device Portal URL>/msedge, und stellen Sie sicher, dass Ihre WebView2-instance in der Liste angezeigt wird:
Gehen Sie zu edge://inspect. Geben Sie im Textfeld Verbindung mit einem Windows-Remotegerät herstellen ein http://<Device Portal URL>, z http://localhost:50080. B. , und klicken Sie dann auf Mit Gerät verbinden.
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: