Skip to content

Publish 3414 #3415

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 26, 2025
Merged

Publish 3414 #3415

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bdf7356
Fix WebView2 debugging with VS Code
mikosg Mar 25, 2025
4f0352d
Writer pass
mikehoffms Mar 25, 2025
eeb351d
Merge pull request #3414 from mikosg/webview2_vscode_debug_2
captainbrosset Mar 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 18 additions & 4 deletions microsoft-edge/webview2/how-to/debug-visual-studio-code.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -28,7 +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": {
// Customize for your app location if needed.
// 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.
"Path": "%path%;e:/path/to/your/app/location; "
},
"useWebView": true,
Expand All @@ -39,6 +42,12 @@ The following code demonstrates launching the app from Visual Studio Code (rathe
```


<!-- ---------------------------------- -->
#### Using a registry value

Instead of setting the `WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS` environment variable, you can add a new registry value named `<myApp.exe>` 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

Expand Down Expand Up @@ -109,8 +118,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.
Expand Down Expand Up @@ -144,6 +152,12 @@ You also need to add a new REGKEY `<myApp.exe> = --remote-debugging-port=9222` u
![The resulting registry key in the Registry Editor](./debug-visual-studio-code-images/set-debugging-port-registry-key.png)


<!-- ---------------------------------- -->
#### 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

Expand Down
Loading