Freigeben über

Debuggen von WebView2-Apps mit Visual Studio

  • Artikel

Microsoft Visual Studio bietet verschiedene Debugtools für Webcode und nativen Code in WebView2-Apps, um Web- und nativen Code in Win32-Apps oder Office-Add-Ins zu debuggen. Dieser Artikel konzentriert sich auf das Debuggen von WebView2-Steuerelementen. Die anderen Debugmethoden in Visual Studio sind ebenfalls verfügbar.

Zusammenfassung der allgemeinen Schritte

So debuggen Sie JavaScript-Code in einem WebView2-Steuerelement:

  1. Installieren Sie die Komponente JavaScript Diagnose in der Workload Desktopentwicklung mit C++ von Visual Studio oder in der Workload einer anderen Plattform.

  2. Legen Sie einen Haltepunkt in einer Zeile von JavaScript-Code fest.

  3. Legen Sie auf der SeiteEigenschaftendebuggen> des Projekts Debuggertyp auf JavaScript (WebView2) (anstelle von Auto oder nativ) fest.

  4. Starten Sie den Debugger wie gewohnt. Wählen Sie beispielsweise in der Menüleiste Debuggen>Debuggen starten (F5) aus.

  5. Interagieren Sie in der ausgeführten WebView2-App mit einer Webseite, auf der der JavaScript-Code ausgeführt wird. Der Debugger wird in der JavaScript-Codezeile mit dem Haltepunkt angehalten.

  6. Verwenden Sie die Debuggerbereiche in Visual Studio.

Diese Schritte werden unten anhand des Standard Win32/C++-Beispiels (WebView2APISample) beschrieben.

Anforderungen

  • Klonen Sie das WebView2Samples-Repository, wenn Sie die unten angegebenen Beispielschritte ausführen möchten (mithilfe des Standard, Win32/C++-Beispiels WebView2APISample). Im folgenden Schritt wird gezeigt, wie Dies geschieht.

  • Installieren Sie Visual Studio 2022. Sie können Visual Studio 2022 verwenden, um mit den WebView2-Beispiel-Apps und Ihrer eigenen WebView2-App zu arbeiten. (Visual Studio 2019 funktioniert auch.) Im folgenden Schritt wird gezeigt, wie Dies geschieht.

  • Installieren und einrichten Sie die Skriptdebuggertools in Visual Studio. Das heißt, installieren Sie die Workload Desktopentwicklung mit C++ von Visual Studio (oder die entsprechende Workload für eine andere Sprache), einschließlich der JavaScript-Diagnose-Komponente. Im folgenden Schritt wird gezeigt, wie Dies geschieht.

  • Erstellen Sie das Standard Win32/C++-Beispiel, und führen Sie es aus, damit die WebView2APISample-App erstellt und ausgeführt wird (wenn Sie die unten angegebenen Beispielschritte ausführen möchten). Im folgenden Schritt wird gezeigt, wie Dies geschieht.

  • Zum Debuggen von Skripts muss die App in Visual Studio gestartet werden.

  • Sie können keinen Debugger an einen ausgeführten WebView2-Prozess anfügen.

Installieren der JavaScript-Diagnose-Komponente

Verwenden Sie die Visual Studio-Installer, um die Workload Desktopentwicklung mit C++ von Visual Studio einschließlich der JavaScript-Diagnose-Komponente wie folgt zu installieren. Wenn Sie eine andere Sprachworkload als C++ verwenden, wählen Sie die JavaScript-Diagnose Komponente dieser Workload aus, ähnlich wie in den folgenden Schritten.

  1. Falls noch nicht geschehen, klonen Sie das WebView2Samples-Repository, wie unter Klonen des WebView2Samples-Repositorys unter Einrichten Ihrer Entwicklungsumgebung für WebView2 beschrieben.

  2. Falls noch nicht geschehen, installieren Sie Visual Studio 2022, wie unter Installieren von Visual Studio unter Einrichten Ihrer Entwicklungsumgebung für WebView2 beschrieben.

  3. Installieren Sie in Visual Studio 2022 die Workload Desktopentwicklung mit C++ wie folgt:

  4. Geben Sie in der Windows-Explorer-Leiste einVisual Studio Installer.

  5. Wählen Sie Visual Studio-Installer aus, um sie zu öffnen.

  6. Klicken Sie im Visual Studio-Installer unter der installierten Version auf die Schaltfläche Mehr, und wählen Sie dann Ändern aus.

  7. Wählen Sie in Visual Studio unter Workloads die Workload Desktopentwicklung mit C++ aus, sodass ein Häkchen angezeigt wird:

    Visual Studio Bildschirm zum Ändern von Workloads

  8. Wählen Sie oben Einzelne Komponenten aus.

  9. Geben Sie in das Suchfeld ein JavaScript diagnostics.

  10. Aktivieren Sie das Kontrollkästchen JavaScript Diagnose:

    Visual Studio: Ändern von Werten auf der Registerkarte

  11. Klicken Sie auf die Schaltfläche Ändern .

Fahren Sie mit dem nächsten Abschnitt weiter unten fort.

Auswählen des JavaScript-Debuggers (WebView2)

Aktivieren Sie als Nächstes skriptdebuggen für WebView2-Apps wie folgt.

  1. Falls noch nicht geschehen, führen Sie die Schritte in der Win32-Beispiel-App aus, damit die WebView2APISample-App erstellt und ausgeführt wird. Die WebView2Samples-Projektmappe sollte in Visual Studio geöffnet sein, und die Beispiel-App sollte nicht ausgeführt werden. Oder öffnen Sie Ihr eigenes WebView2-App-Projekt in Visual Studio.

  2. Klicken Sie in Visual Studio in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WebView2APISample (oder Ihr eigenes Projekt), und wählen Sie dann Eigenschaften aus.

    Das Dialogfeld Eigenschaftenseiten wird geöffnet.

  3. Erweitern Sie auf der linken Seite Konfigurationseigenschaften, und wählen Sie dann Debuggen aus.

  4. Wählen Sie rechts neben Debuggertyp die Option JavaScript (WebView2) aus, und klicken Sie dann auf die Schaltfläche OK :

    Die Eigenschaft

Debuggen Ihrer WebView2-App

Debuggen Sie nach dem obigen Setup Ihre WebView2-App wie folgt.

  1. Um einen Haltepunkt im Quellcode festzulegen, zeigen Sie auf die linke Seite der Zeilennummer, und klicken Sie, um einen Haltepunkt festzulegen. Öffnen Sie WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.jsbeispielsweise , und legen Sie einen Haltepunkt in Zeile 2 fest: console.log("onAddClick+");im Text der onAddClick Funktion:

    Ausführen des lokalen Windows-Debuggers in Visual Studio

    Wenn Sie einen Haltepunkt festlegen, müssen Sie die Datei öffnen, die sich genau in dem Pfad befindet, der Ihrem WebView2-Steuerelement zugeordnet ist, da der JS/TS-Debugadapter keine Quellpfadzuordnung durchführt.

    Der Haltepunkt wird ausgelöst, wenn dieser Codeabschnitt ausgeführt wird. Dieser Haltepunkt wird ausgelöst, wenn In einem späteren Schritt unten in der Beispiel-App auf die Schaltfläche Neues Element hinzufügen geklickt wird.

  2. Wählen Sie die Bitgröße der Plattform aus, z. B. x64.

  3. Führen Sie zum Ausführen des Debuggers eine der folgenden Aktionen aus:

    • Wählen Sie in der Menüleiste Debuggen>Debuggen starten (F5) aus.
    • Klicken Sie Projektmappen-Explorer mit der rechten Maustaste auf das Projekt >Debuggen>Neue Instanz starten oder Neue Instanz schrittweise ausführen.
    • Klicken Sie links neben lokalem Windows-Debugger auf die grüne Schaltfläche Wiedergabe.

    Die WebView2APISample-App (oder Ihre eigene App) wird ausgeführt und geöffnet, und der Debugger stellt eine Verbindung mit dem ersten erstellten WebView2-Prozess her. UnterEigenschaftendebuggen> für das Projekt wurde lokaler Windows-Debugger auf JavaScript (WebView2) festgelegt.

  4. Klicken Sie in Visual Studio unten rechts auf die Registerkarte Ausgabe .

    Die Registerkarte enthält nur die folgende Meldung, in der der JS-Debugger erwähnt wird: "Ausführliche Protokolle werden in: C:\Users\myUsername\AppData\Local\Temp\visualstudio-js-debugger.txt geschrieben".

  5. Wählen Sie im App-Fenster WebView2APISample die OptionSzenarioskriptdebuggen>>JavaScript Local File aus.

    Die Datei WebView2APISample/Debug/x64/assets/ScenarioJavaScriptDebugIndex.html wird gerendert:

    Gerenderte HTML-Datei

  6. Untersuchen Sie in Visual Studio den Bereich Ausgabe . Die folgende Ausgabe wurde hinzugefügt:

    This is the very first line of code that executes.
Second
Third
inside
onAddClick+
onAddClick-
onAddClick+
onAddClick-
End

  7. Klicken Sie auf der Webseite der App auf die Popupschaltfläche Neues Element hinzufügen .

    Der Haltepunkt in der onAddClick Funktion wird erreicht, und die App wird im Debugger angehalten.

  8. Wechseln Sie zum Visual Studio-Fenster, und untersuchen Sie die Debuggerbereiche.

  9. Klicken Sie auf die Registerkarte Ausgabe , um die Ausgabe der App anzuzeigen:

    Registerkarte

    Die App-Ausgabe zeigt "Dies ist die erste Codezeile, die ausgeführt wird", aufgrund der Zeile console.log("This is the very first line of code that executes."); in der Datei WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.html.

Problembehandlung

Öffnen Sie DevTools mit einem anderen Ansatz als F12.

Wenn Sie Ihre App in Visual Studio mit angefügtem nativen Debugger debuggen, wird beim Anzeigen der ausgeführten App durch Drücken von F12 möglicherweise der native Debugger gestartet, anstatt die Entwicklertools zu starten.

Drücken Sie STRG+UMSCHALT+I, um DevTools zu öffnen. Oder klicken Sie mit der rechten Maustaste auf die Seite in der ausgeführten App, und wählen Sie dann aus Inspect.

Zuordnung des virtuellen Quellpfads wird in Visual Studio 2019 nicht unterstützt

Wenn Sie die WebView2-Methode SetVirtualHostNameToFolderMapping verwenden, versteht der Debugger in Visual Studio 2019 die Zuordnung des virtuellen Quellpfads nicht, sodass Breakpoints nicht ordnungsgemäß funktionieren.

Wenn Sie einen Haltepunkt festlegen, müssen Sie die Datei öffnen, die sich genau in dem Pfad befindet, der Ihrem WebView2-Steuerelement zugeordnet ist, da der JS/TS-Debugadapter keine Quellpfadzuordnung durchführt.

Die Zuordnung des virtuellen Quellpfads wird vom Debugger in Visual Studio Code unterstützt.

Siehe auch