From bdf7356fec96da0139bf8a57e9235225c375d871 Mon Sep 17 00:00:00 2001 From: Gergely Mikos Date: Tue, 25 Mar 2025 17:49:16 +0100 Subject: [PATCH 1/2] Fix WebView2 debugging with VS Code --- .../webview2/how-to/debug-visual-studio-code.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio-code.md b/microsoft-edge/webview2/how-to/debug-visual-studio-code.md index 85ee0a96f6..a1b6bfd482 100644 --- a/microsoft-edge/webview2/how-to/debug-visual-studio-code.md +++ b/microsoft-edge/webview2/how-to/debug-visual-studio-code.md @@ -28,6 +28,9 @@ The following code demonstrates launching the app from Visual Studio Code (rathe "request": "launch", "runtimeExecutable": "C:/path/to/your/webview2/app.exe", "env": { + // The following variable is needed when "runtimeExecutable" property is set. + // The port number below shall match the value of "port" property above. + "WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS": "--remote-debugging-port=9222" // Customize for your app location if needed. "Path": "%path%;e:/path/to/your/app/location; " }, @@ -38,6 +41,7 @@ The following code demonstrates launching the app from Visual Studio Code (rathe "webRoot": "${workspaceFolder}/path/to/your/assets" ``` +> Instead of setting the `WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS` environment variable, you can add a new registry value named `` with data `--remote-debugging-port=9222` to the registry under registry key `Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments`, so that the debugger can find the proper port. See [WewbView2 browser flags](../concepts/webview-features-flags.md) for more information. #### Command-line URL parameter passed in @@ -109,8 +113,7 @@ You might need to attach the debugger to running WebView2 processes. To do that "runtimeExecutable": "C:/path/to/your/webview2/myApp.exe", "env": { "Path": "%path%;e:/path/to/your/build/location; " -}, -"useWebView": true +} ``` Your WebView2 control must open the Chrome Developer Protocol (CDP) port to allow debugging of the WebView2 control. Your code must be built to ensure that only one WebView2 control has a CDP port open, before starting the debugger. @@ -143,6 +146,7 @@ You also need to add a new REGKEY ` = --remote-debugging-port=9222` u ![The resulting registry key in the Registry Editor](./debug-visual-studio-code-images/set-debugging-port-registry-key.png) +> Instead of adding the above registry key, you can set the `WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS` environment variable to `--remote-debugging-port=9222`. Make sure that your application was started after the environment variable had been set, and that your application inherits the variable. See [WewbView2 browser flags](../concepts/webview-features-flags.md) for more information. ## Debug tracing options From 4f0352d78e245a54cb11ed80a754c8cbfd57eb5b Mon Sep 17 00:00:00 2001 From: "Michael S. Hoffman" Date: Tue, 25 Mar 2025 13:34:13 -0700 Subject: [PATCH 2/2] Writer pass --- .../how-to/debug-visual-studio-code.md | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio-code.md b/microsoft-edge/webview2/how-to/debug-visual-studio-code.md index a1b6bfd482..7dd7f843a3 100644 --- a/microsoft-edge/webview2/how-to/debug-visual-studio-code.md +++ b/microsoft-edge/webview2/how-to/debug-visual-studio-code.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: webview -ms.date: 02/21/2025 +ms.date: 03/25/2025 --- # Debug WebView2 apps with Visual Studio Code @@ -28,10 +28,10 @@ The following code demonstrates launching the app from Visual Studio Code (rathe "request": "launch", "runtimeExecutable": "C:/path/to/your/webview2/app.exe", "env": { - // The following variable is needed when "runtimeExecutable" property is set. - // The port number below shall match the value of "port" property above. + // The following variable is needed when the "runtimeExecutable" property is set. + // The port number below must match the value of the "port" property above. "WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS": "--remote-debugging-port=9222" - // Customize for your app location if needed. + // Customize for your app location. "Path": "%path%;e:/path/to/your/app/location; " }, "useWebView": true, @@ -41,7 +41,12 @@ The following code demonstrates launching the app from Visual Studio Code (rathe "webRoot": "${workspaceFolder}/path/to/your/assets" ``` -> Instead of setting the `WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS` environment variable, you can add a new registry value named `` with data `--remote-debugging-port=9222` to the registry under registry key `Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments`, so that the debugger can find the proper port. See [WewbView2 browser flags](../concepts/webview-features-flags.md) for more information. + + +#### Using a registry value + +Instead of setting the `WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS` environment variable, you can add a new registry value named `` with data `--remote-debugging-port=9222` to the registry under registry key `Computer\HKEY_CURRENT_USER\Software\Policies\Microsoft\Edge\WebView2\AdditionalBrowserArguments`, so that the debugger can find the proper port. For more information, see [WewbView2 browser flags](../concepts/webview-features-flags.md). + #### Command-line URL parameter passed in @@ -146,7 +151,12 @@ You also need to add a new REGKEY ` = --remote-debugging-port=9222` u ![The resulting registry key in the Registry Editor](./debug-visual-studio-code-images/set-debugging-port-registry-key.png) -> Instead of adding the above registry key, you can set the `WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS` environment variable to `--remote-debugging-port=9222`. Make sure that your application was started after the environment variable had been set, and that your application inherits the variable. See [WewbView2 browser flags](../concepts/webview-features-flags.md) for more information. + + +#### Using an environment variable + +Instead of adding the above registry key, you can set the `WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS` environment variable to `--remote-debugging-port=9222`. Make sure that your application is started after the environment variable is set, and make sure that your application inherits the environment variable. For more information, see [WewbView2 browser flags](../concepts/webview-features-flags.md). + ## Debug tracing options