WPF-Beispiel-App mit CDP-Erweiterung

In diesem WebView2-Beispiel wird veranschaulicht, wie Sie die WebView2 CDP-Erweiterung verwenden, um das Chrome DevTools-Protokoll (CDP) in einer WPF-App zu verwenden.

• Beispielname: WV2CDPExtensionWPFSample
• Repositoryverzeichnis: WV2CDPExtensionWPFSample
• Lösungsdatei: WV2CDPExtensionWPFSample.sln

Dieses Beispiel, WV2CDPExtensionWPFSample, wurde mit der WebView2 CDP-Erweiterung (dem NuGet-Paket Microsoft.Web.WebView2.DevToolsProtocolExtension ) erstellt. In diesem Beispiel werden Chrome DevTools-Protokollmethoden für ein DevToolsProtocolHelper -Objekt in WebView2 aufgerufen.

Dieses Beispiel wird als WPF Visual Studio 2019-Projekt erstellt. C# wird in der WebView2-Umgebung verwendet.

Das Menü DevTools-Befehle :

Das DevTools-Menü "Ereignisse ":

Wenn Sie WebView2 zum ersten Mal verwenden, empfiehlt es sich, zuerst das Tutorial Erste Schritte mit WebView2 in WPF-Apps zu befolgen. Das Tutorial führt Sie durch das Erstellen einer WebView2 und das Hinzufügen einiger grundlegender WebView2-Funktionen.

Schritt 1: Installieren eines Vorschaukanals von Microsoft Edge

Wir empfehlen die neueste Version des Canary-Kanals.

1. Wenn noch kein Vorschaukanal von Microsoft Edge (Beta, Dev oder Canary) in einem separaten Fenster oder einer separaten Registerkarte installiert ist, finden Sie weitere Informationen unter Installieren eines Vorschaukanals von Microsoft Edge unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie mit den folgenden Schritten fort.

Schritt 2: Installieren von Visual Studio mit .NET-Unterstützung

Microsoft Visual Studio (mit .NET-Unterstützung) ist erforderlich. Microsoft Visual Studio Code wird für dieses Beispiel nicht unterstützt.

1. Wenn Visual Studio (erforderliche Mindestversion) mit .NET-Unterstützung noch nicht installiert ist, finden Sie in einem separaten Fenster oder einer separaten Registerkarte weitere Informationen unter Installieren von Visual Studio unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie mit den folgenden Schritten fort.

Schritt 3: Klonen oder Herunterladen des WebView2Samples-Repositorys

1. Falls noch nicht geschehen, klonen Sie das Repository, oder laden Sie es WebView2Sample auf Ihr lokales Laufwerk herunter. In einem separaten Fenster oder einer separaten Registerkarte finden Sie weitere Informationen unter Herunterladen des WebView2Samples-Repositorys unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie weiter unten fort.

Schritt 4: Öffnen der Projektmappe in Visual Studio

1. Öffnen Sie die .sln Datei auf Ihrem lokalen Laufwerk in Visual Studio im Verzeichnis:

   • <your-repos-directory>/WebView2Samples/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln

   oder:

   • <your-repos-directory>/WebView2Samples-main/SampleApps/WV2CDPExtensionWPFSample/WV2CDPExtensionWPFSample.sln

Wenn Sie Visual Studio 2017 verwenden möchten, ändern Sie in Visual Studio das Plattformtoolset des Projekts unter Projekteigenschaften > Konfigurationseigenschaften > Allgemeines > Plattformtoolset. Um Visual Studio 2017 verwenden zu können, müssen Sie möglicherweise auch ein aktuelles Windows SDK installieren.

Schritt 5: Installieren von Workloads, wenn Sie dazu aufgefordert werden

1. Wenn Sie dazu aufgefordert werden, installieren Sie alle angeforderten Visual Studio-Workloads. In einem separaten Fenster oder einer separaten Registerkarte finden Sie weitere Informationen unter Installieren von Visual Studio-Workloads unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie weiter unten fort.

   Das Projekt WV2CDPExtensionWPFSample wird in Visual Studio geöffnet:

   

Schritt 6: Erstellen und Ausführen des Projekts mit installierter Version von SDKs

Eine Version des WebView2 SDK und der WebView2 DevToolsProtocolExtension sind als NuGet-Pakete in diesem Projekt enthalten. In einem späteren Schritt aktualisieren Sie diese mithilfe des NuGet-Paket-Managers von Visual Studio.

Legen Sie oben in Visual Studio das Buildziel wie folgt fest:

1. Wählen Sie in der Dropdownliste Projektmappenkonfigurationendie Option Debuggen oder Freigeben aus.

2. Wählen Sie in der Dropdownliste Lösungsplattformendie Option Beliebige CPU aus.

3. Klicken Sie Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WV2CDPExtensionWPFSample, und wählen Sie dann Erstellen aus.

1. Wählen Sie in Visual Studio Debuggen>Debuggen starten (F5) aus.

   Das Beispiel-App-Fenster wird geöffnet:

   

2. Wählen Sie in Visual Studio Debuggen>Debuggen Debuggen beenden aus. Visual Studio schließt die App.

Schritt 7: Aktualisieren des WebView2 SDK

1. Klicken Sie Projektmappen-Explorer mit der rechten Maustaste auf das Projekt (nicht auf den Projektmappenknoten), und wählen Sie dann NuGet-Pakete verwalten aus. Der NuGet-Paket-Manager wird geöffnet.

2. Klicken Sie auf die Registerkarte Installiert oder Updates.

3. Aktivieren oder deaktivieren Sie das Kontrollkästchen Vorabversion einschließen .

   

   Der obige Screenshot zeigt Visual Studio 2019 mit diesem Beispiel im Kontext der übergreifenden WebView2APIsSample-Lösung anstelle der vorhandenen eigenständigen Projektmappe. In diesem Screenshot enthält das Repository eine Releaseversion des WebView2 SDK, und neuere Release- und Vorabversionen des SDK sind verfügbar.

4. Wenn eine neuere Version des Microsoft.Web.WebView2 SDK aufgeführt ist, klicken Sie auf die Schaltfläche Aktualisieren . Eine Vorabversion hat das Suffix "-prerelease", z. B. 1.0.1248-prerelease. Mit vorab veröffentlichten SDKs können Sie die neuesten WebView2-Features und -APIs ausprobieren.

Wenn Sie Details zu diesem Schritt in einem separaten Fenster oder einer separaten Registerkarte anzeigen möchten, lesen Sie Installieren oder Aktualisieren des WebView2 SDK unter Einrichten Ihrer Entwicklungsumgebung für WebView2. Führen Sie die Schritte in diesem Abschnitt aus, kehren Sie dann zu dieser Seite zurück, und fahren Sie weiter unten fort.

Schritt 8: Aktualisieren der WebView2 CDP-Erweiterung

Voraussetzung für dieses Beispiel ist die neueste Version der WebView2 CDP-Erweiterung (Microsoft.Web.WebView2.DevToolsProtocolExtension), die in diesem Projekt enthalten ist. Dieses Paket fügt Unterstützung für die Chrome DevTools-Protokoll-API (CDP) hinzu.

1. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie dann NuGet-Pakete verwalten aus. Der NuGet-Paket-Manager wird geöffnet.

2. Klicken Sie auf die Registerkarte Installiert oder Updates.

3. Deaktivieren Sie das Kontrollkästchen Vorabversion einschließen .

   

4. Wenn eine neuere Version des Microsoft.Web.WebView2.DevToolsProtocolExtension SDK aufgeführt ist, klicken Sie auf die Schaltfläche Aktualisieren .

Siehe auch:

• Verwenden des Chrome DevTools-Protokolls (CDP) in WebView2-Apps

Schritt 9: Erstellen und Ausführen des Projekts mit aktualisierten Paketen

1. Wählen Sie in Visual Studio Debuggen>Debuggen starten (F5) aus.

   Das Beispiel-App-Fenster wird geöffnet:

   

2. Wählen Sie in Visual Studio Debuggen>Debuggen Debuggen beenden aus. Visual Studio schließt die App.

Schritt 10: Untersuchen des Codes

1. Untersuchen Sie den Code im Code-Editor von Visual Studio:

   

   Das Menü DevTools-Befehle :

   

   Das DevTools-Menü "Ereignisse ":

   

Siehe auch

• WebView2-API-Referenz
• Erste Schritte mit WebView2 in WinUI 2-Apps (UWP)
• Microsoft.Web.WebView2.DevToolsProtocolExtension bei NuGet.