Debug WebView2 apps with Visual Studio
Microsoft Visual Studio provides various debugging tools for web and native code in WebView2 apps, to debug web and native code in Win32 apps or Office Add-ins. This article focuses on debugging WebView2 controls. The other methods of debugging in Visual Studio are available, as well.
Open DevTools using an approach other than F12
When you debug your app in Visual Studio with the native debugger attached, pressing
F12 may trigger the native debugger instead of Developer Tools. To avoid that situation, press
I. Or, right-click the page, and then select
To debug scripts, the app must be launched from within Visual Studio.
You cannot attach a debugger to a running WebView2 process.
Install Visual Studio 2019 version 16.4 Preview 2 or later.
To debug your code, first install and set up the script debugger tools in Visual Studio, per the following two sections.
In the Windows Explorer bar, type
Visual Studio Installer.
Select Visual Studio Installer to open it.
In the Visual Studio Installer, on the installed version, click the More button, and then select Modify.
In Visual Studio, under Workloads, select the Desktop Development with C++ setting:
Select Individual components, at the top.
In the search box, enter
Enable script debugging for WebView2 apps
Second, enable script debugging for WebView2 apps, as follows.
Right-click your WebView2 project, and then select Properties.
Under the Configuration Properties, select Debugging.
Debug your WebView2 app
After doing the above setup, debug your WebView2 app, as follows.
To set a breakpoint in your source code, hover to the left of the line number, and click to set a breakpoint. The JS/TS debug adapter doesn't perform source path mapping. You must open the exact same path associated with your WebView2.
To run the debugger, select the bit size of the platform, and then click the green Play button next to Local Windows Debugger. The app runs and the debugger connects to the first WebView2 process that is created.
In the Debug Console, find the output from the debugger.
Virtual source path mapping not supported in Visual Studio 2019
If you use the WebView2 SetVirtualHostNameToFolderMapping method, the debugger in Visual Studio 2019 doesn't understand the virtual source path mapping, so breakpoints don't work correctly.
Virtual source path mapping works when you use the debugger in Visual Studio Code.
Submit and view feedback for