Freigeben über

Debuggen von WebView2-Apps mit Visual Studio Code

  • Artikel

Verwenden Sie Microsoft Visual Studio Code zum Debuggen von Skripts, die in WebView2-Steuerelementen ausgeführt werden. Visual Studio Code verfügt über einen integrierten Debugger für das Browserdebuggen. Weitere Informationen finden Sie unter Browserdebuggen in VS Code.

Erstellen einer launch.json-Datei

Um Ihren Code zu debuggen, muss Ihr Projekt über eine launch.json Datei verfügen. Eine launch.json Datei ist eine Debuggerkonfigurationsdatei zum Konfigurieren und Anpassen des Visual Studio Code-Debuggers. Eine der Eigenschaften, die zum Konfigurieren des Debuggers erforderlich sind, ist die request -Eigenschaft. Es gibt zwei request Typen, launch und attach.

Der folgende Code veranschaulicht das Starten der App aus Visual Studio Code (anstatt den Debugger an eine ausgeführte Instanz der App anzufügen). Dazu muss die App zuvor erstellt worden sein. Wenn Ihr Projekt keine Datei enthält launch.json , erstellen Sie eine neue launch.json Datei im .vscode Unterordner ihres aktuellen Projekts, und fügen Sie den folgenden Code ein:

"name": "Hello debug world",
"type": "msedge",
"port": 9222, // The port value is optional, and the default value is 9222.
"request": "launch",
"runtimeExecutable": "C:/path/to/your/webview2/app.exe",
"env": {
   // Customize for your app location if needed
   "Path": "%path%;e:/path/to/your/app/location; "
},
"useWebView": true,
// The following two lines set up source path mapping, where `url` is the start page
// of your app, and `webRoot` is the top level directory with all your code files.
"url": "file:///${workspaceFolder}/path/to/your/toplevel/foo.html",
"webRoot": "${workspaceFolder}/path/to/your/assets"

Übergebener Befehlszeilen-URL-Parameter

Die Visual Studio Code-Quellpfadzuordnung erfordert jetzt eine URL, sodass Ihre App jetzt beim Start einen url Befehlszeilenparameter empfängt. Sie können den url Parameter bei Bedarf problemlos ignorieren.

Debuggen des Codes

  1. Um einen Haltepunkt im Quellcode festzulegen, klicken Sie auf eine Codezeile, und drücken Sie dann F9:

    Ein In Visual Studio Code festgelegter Haltepunkt

  2. Wählen Sie auf der Registerkarte Ausführen im Dropdownmenü die Startkonfiguration aus.

  3. Klicken Sie auf Debuggen starten. Dabei handelt es sich um das grüne Dreieck neben der Dropdownliste der Startkonfiguration:

    Registerkarte

  4. Öffnen Sie die Debugkonsole, um die Debugausgabe und die Fehler anzuzeigen:

    Die Debugkonsole in Visual Studio Code

Gezieltes WebView2-Debuggen

In einigen WebView2-Apps verwenden Sie möglicherweise mehr als ein WebView2-Steuerelement. Wenn Sie auswählen möchten, welches WebView2-Steuerelement in dieser Situation gedebuggt werden soll, können Sie das gezielte WebView2-Debuggen verwenden.

Öffnen Sie launch.json die folgenden Aktionen, und führen Sie sie aus, um das gezielte WebView2-Debuggen zu verwenden.

  1. Vergewissern Sie sich, dass der useWebview Parameter auf truefestgelegt ist.

  2. Fügen Sie den Parameter hinzu urlFilter . Wenn das WebView2-Steuerelement zu einer URL navigiert, wird der urlFilter Parameterwert verwendet, um Zeichenfolgen zu vergleichen, die in der URL angezeigt werden.

"useWebview": "true",
"urlFilter": "*index.ts",

// Options for "urlFilter":
// Match any url that ends with "index.ts":
"urlFilter": "*index.ts",
// Match any url that contains "index" anywhere in the URL:
"urlFilter": "*index*",
// Explicitly match a file named "index.ts":
"urlFilter": "file://C:/path/to/my/index.ts",

Beim Debuggen Ihrer App müssen Sie den Code möglicherweise von Beginn des Renderingvorgangs an schrittweise durchlaufen. Wenn Sie Webseiten auf Websites rendern und keinen Zugriff auf den Quellcode haben, können Sie die ?=value Option verwenden, da Webseiten nicht erkannte Parameter ignorieren.

Debuggen von zwei WebView2-Steuerelementen nicht gleichzeitig möglich

Nachdem die erste Übereinstimmung in der URL gefunden wurde, wird der Debugger beendet. Sie können nicht zwei WebView2-Steuerelemente gleichzeitig debuggen, da der CDP-Port von allen WebView2-Steuerelementen gemeinsam genutzt wird und eine einzelne Portnummer verwendet.

Debuggen ausgeführter Prozesse

Möglicherweise müssen Sie den Debugger an ausgeführte WebView2-Prozesse anfügen. Aktualisieren Sie dazu in launch.jsonden request Parameter, und ändern Sie dessen Wert in attach:

"name": "Hello debugging world",
"type": "msedge",
"port": 9222,
"request": "attach",
"runtimeExecutable": "C:/path/to/your/webview2/myApp.exe",
"env": {
   "Path": "%path%;e:/path/to/your/build/location; "
},
"useWebView": true

Ihr WebView2-Steuerelement muss den CDP-Port (Chrome Developer Protocol) öffnen, um das Debuggen des WebView2-Steuerelements zu ermöglichen. Ihr Code muss erstellt werden, um sicherzustellen, dass nur ein WebView2-Steuerelement einen CDP-Port geöffnet hat, bevor der Debugger gestartet wird.

Sie müssen auch einen neuen REGKEY <myApp.exe> = --remote-debugging-port=9222 unter Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArgumentshinzufügen, damit der Debugger den richtigen Port finden kann. So fügen Sie diesen Registrierungsschlüssel hinzu:

  1. Drücken Sie die Windows-Logo-Taste , und suchen Sie dann nach dem Registrierungs-Editor. Öffnen Sie die App Registrierungs-Editor , und klicken Sie dann auf Ja , um die Bearbeitung zuzulassen.

  2. Versuchen Sie in der Ordnerstruktur auf der linken Seite, zu erweitern HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments.

  3. Wenn der \Edge\WebView2\AdditionalBrowserArguments Teil dieses Pfads nicht vorhanden ist, erstellen Sie diese drei geschachtelten Unterordner wie folgt:

    1. So erstellen Sie den \Edge Unterordner: Klicken Sie in der Ordnerstruktur mit der rechten Maustaste auf den HKEY_CURRENT_USER\Software\Policies\Microsoft Ordner, zeigen Sie auf Neu, und wählen Sie dann Schlüssel aus. Ein Ordner wird als untergeordnetes Element des Ordners hinzugefügt, der Microsoft anfangs den Namen hat New Key #1. Klicken Sie mit der rechten Maustaste auf den New Key #1 Ordner, und wählen Sie dann Umbenennen aus. Geben Sie als Namen des neuen Schlüssels ein Edge .

    2. Erstellen Sie den \WebView2 Unterordner wie im vorherigen Schritt.

    3. Erstellen Sie den \AdditionalBrowserArguments Unterordner wie im vorherigen Schritt.

      Die Struktur ist jetzt auf HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArgumentserweitert.

  4. Klicken Sie mit der rechten Maustaste auf den AdditionalBrowserArguments Ordner, zeigen Sie auf Neu, und wählen Sie dann Zeichenfolgenwert aus. Klicken Sie in der Spalte Name mit der rechten Maustaste auf New Value #1, wählen Sie Umbenennen aus, und geben Sie dann den Dateinamen ihrer ausführbaren App ein, z myApp.exe. B. .

  5. Klicken Sie in der Spalte Name mit der rechten Maustaste auf den Namen der ausführbaren Datei, z myApp.exe. B. , und wählen Sie dann Ändern aus. Das Dialogfeld Zeichenfolge bearbeiten wird geöffnet.

  6. Geben Sie in das Textfeld Wertdaten ein --remote-debugging-port=9222:

    Dialogfeld

  7. Klicken Sie auf die Schaltfläche OK , und überprüfen Sie dann, ob der Registrierungsschlüssel mit dem Folgenden übereinstimmt (mit dem Dateinamen Ihrer .exe Datei in der Spalte Name ):

    Der resultierende Registrierungsschlüssel im Registrierungs-Editor

Debugablaufverfolgungsoptionen

Um die Debugablaufverfolgung zu aktivieren, fügen Sie den trace Parameter wie folgt zu launch.json hinzu:

  1. Fügen Sie den Parameter hinzu trace :
"name": "Hello debugging world",
"type": "msedge",
"port": 9222,
"request": "attach",
"runtimeExecutable": "C:/path/to/your/webview2/app.exe",
"env": {
"Path": "%path%;e:/path/to/your/build/location; "
},
"useWebView": true
,"trace": true  // Turn on debug tracing, and save the output to a log file.

Speichern der Debugausgabe in einer Protokolldatei:

Speichern der Debugausgabe in einer Protokolldatei 

,"trace": "verbose"  // Turn on verbose tracing in the Debug Output pane.

Visual Studio Code-Debugausgabe mit aktivierter ausführlicher Ablaufverfolgung:

Visual Studio Code-Debugausgabe mit aktivierter ausführlicher Ablaufverfolgung

Debuggen von Office-Add-Ins

Wenn Sie Office-Add-Ins debuggen, öffnen Sie den Add-In-Quellcode in einer separaten Instanz von Visual Studio Code. Öffnen Sie launch.json in Ihrer WebView2-App. Fügen Sie den folgenden Code in hinzu launch.json, um den Debugger an das Office-Add-In anzufügen:

,"debugServer": 4711

Debuggen von WebView2 WinUI 2-Apps (UWP)

  1. Installieren Sie eine WebView2 Runtime-Version über 106.0.1370.34.

  2. Öffnen Sie den Registrierungs-Editor, indem Sie die Windows-Logo-Taste drücken und dann nach dem Registrierungs-Editor suchen. Öffnen Sie die Anwendung Registrierungs-Editor , und wählen Sie Ja aus, um die Bearbeitung zuzulassen.

  3. Legen Sie den Registrierungsschlüssel HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments auf fest --remote-debugging-pipe. Führen Sie dazu die Schritte aus, die oben im Abschnitt Debuggen ausgeführter Prozesse beschrieben sind.

  4. Vergewissern Sie sich, dass der Registrierungsschlüssel im Editor festgelegt ist und mit folgendem übereinstimmt:

    Festlegen des Registrierungsschlüssels AdditionalBrowserArguments auf --remote-debugging-pipe

  5. Fügen Sie Ihrer launch.json Datei eine neue Konfiguration hinzu. Öffnen Sie launch.json , und fügen Sie den folgenden Code hinzu:

    "name": "Attach to UWP App",
"useWebView":{
   "pipeName":"JSDebugPipe"
}
"request": "attach",
"type": "msedge",
"webRoot":"${workspaceFolder}"

  6. Starten Sie Ihre App.

  7. Klicken Sie auf die Schaltfläche Debuggen starten , um den Prozess anzufügen und mit dem Debuggen zu beginnen.

    Ausführen und Debuggen

Problembehandlung für den Debugger

Diese Szenarien können auftreten, wenn Sie den Debugger verwenden.

Hält nicht am Haltepunkt an

Wenn der Debugger nicht am Haltepunkt anhält und Sie eine Debugausgabe haben:

Um das Problem zu beheben, vergewissern Sie sich, dass die Datei mit dem Haltepunkt dieselbe Datei ist, die vom WebView2-Steuerelement verwendet wird. Der Debugger führt keine Quellpfadzuordnung aus.

Anfügen an den ausgeführten Prozess nicht möglich

Wenn Sie an einen ausgeführten Prozess nicht anfügen können und ein Timeoutfehler angezeigt wird:

Um das Problem zu beheben, vergewissern Sie sich, dass das WebView2-Steuerelement den CDP-Port geöffnet hat. Stellen Sie sicher, dass Ihr additionalBrowserArguments Wert in der Registrierung richtig ist, oder die Optionen sind richtig. Weitere Informationen finden Sie unter additionalBrowserArguments für dotnet und additionalBrowserArguments für Win32.

Siehe auch