diff --git a/microsoft-edge/webview2/how-to/context-menus.md b/microsoft-edge/webview2/how-to/context-menus.md index 642fce52c3..45f54e4df3 100644 --- a/microsoft-edge/webview2/how-to/context-menus.md +++ b/microsoft-edge/webview2/how-to/context-menus.md @@ -728,7 +728,7 @@ When the user selects a WebView2 context menu command (a default menu item that' --- - + #### Custom menu items If your host app reports a custom menu item as the selected menu item, then the `CustomMenuItemSelected` event will be fired for the custom menu item. 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 031088ffd3..cce2aea1ad 100644 --- a/microsoft-edge/webview2/how-to/debug-visual-studio-code.md +++ b/microsoft-edge/webview2/how-to/debug-visual-studio-code.md @@ -39,7 +39,7 @@ The following code demonstrates launching the app from Visual Studio Code (rathe ``` - + #### Command-line URL parameter passed in Visual Studio Code source path mapping now requires an URL, so your app now receives a `url` command-line parameter when it starts. You can safely ignore the `url` parameter, if needed. @@ -90,7 +90,7 @@ Open `launch.json` and complete the following actions to use targeted WebView2 d When debugging your app, you might need to step through the code from the beginning of the rendering process. If you are rendering webpages on sites and you don't have access to the source code, you can use the `?=value` option, because webpages ignore unrecognized parameters. - + #### Cannot debug two WebView2 controls at the same time After the first match is found in the URL, the debugger stops. You cannot debug two WebView2 controls at the same time, because the CDP port is shared by all WebView2 controls, and uses a single port number. @@ -225,7 +225,7 @@ If you're debugging Office Add-ins, open the add-in source code in a separate in You might encounter these scenarios when using the debugger. - + #### Doesn't stop at breakpoint If the debugger doesn't stop at the breakpoint, and you have debug output: @@ -233,7 +233,7 @@ If the debugger doesn't stop at the breakpoint, and you have debug output: To solve the issue, confirm that the file with the breakpoint is the same file that's used by the WebView2 control. The debugger doesn't perform source path mapping. - + #### Can't attach to running process If you can't attach to a running process, and you get a timeout error: diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio-images/breakpoint.png b/microsoft-edge/webview2/how-to/debug-visual-studio-images/breakpoint.png deleted file mode 100644 index 4d6cb7d766..0000000000 Binary files a/microsoft-edge/webview2/how-to/debug-visual-studio-images/breakpoint.png and /dev/null differ diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio-images/console.png b/microsoft-edge/webview2/how-to/debug-visual-studio-images/console.png deleted file mode 100644 index 03af7222ca..0000000000 Binary files a/microsoft-edge/webview2/how-to/debug-visual-studio-images/console.png and /dev/null differ diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio-images/indiv-comp.png b/microsoft-edge/webview2/how-to/debug-visual-studio-images/indiv-comp.png index 0ea2b12bee..424f735e23 100644 Binary files a/microsoft-edge/webview2/how-to/debug-visual-studio-images/indiv-comp.png and b/microsoft-edge/webview2/how-to/debug-visual-studio-images/indiv-comp.png differ diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio-images/output-tab-vs2022.png b/microsoft-edge/webview2/how-to/debug-visual-studio-images/output-tab-vs2022.png new file mode 100644 index 0000000000..24bbb401b5 Binary files /dev/null and b/microsoft-edge/webview2/how-to/debug-visual-studio-images/output-tab-vs2022.png differ diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio-images/run-local-windows-debugger.png b/microsoft-edge/webview2/how-to/debug-visual-studio-images/run-local-windows-debugger.png new file mode 100644 index 0000000000..3d6b1477a0 Binary files /dev/null and b/microsoft-edge/webview2/how-to/debug-visual-studio-images/run-local-windows-debugger.png differ diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio-images/run.png b/microsoft-edge/webview2/how-to/debug-visual-studio-images/run.png deleted file mode 100644 index 92efcf0554..0000000000 Binary files a/microsoft-edge/webview2/how-to/debug-visual-studio-images/run.png and /dev/null differ diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio-images/webview-script-debugging-example.png b/microsoft-edge/webview2/how-to/debug-visual-studio-images/webview-script-debugging-example.png new file mode 100644 index 0000000000..9b5ed7860d Binary files /dev/null and b/microsoft-edge/webview2/how-to/debug-visual-studio-images/webview-script-debugging-example.png differ diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio-images/workloads.png b/microsoft-edge/webview2/how-to/debug-visual-studio-images/workloads.png index 5c5f89457f..c7f3617681 100644 Binary files a/microsoft-edge/webview2/how-to/debug-visual-studio-images/workloads.png and b/microsoft-edge/webview2/how-to/debug-visual-studio-images/workloads.png differ diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio.md b/microsoft-edge/webview2/how-to/debug-visual-studio.md index 80458998be..43bf7cf003 100644 --- a/microsoft-edge/webview2/how-to/debug-visual-studio.md +++ b/microsoft-edge/webview2/how-to/debug-visual-studio.md @@ -6,36 +6,59 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: webview -ms.date: 02/11/2022 +ms.date: 09/17/2024 --- # 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 + +#### Summary of high-level steps + +To debug JavaScript code in a WebView2 control: + +1. Install the **JavaScript diagnostics** component in the **Desktop development with C++** workload of Visual Studio, or in another platform's workload. + +1. Set a breakpoint on a line of JavaScript code. + +1. In the project's **Properties** > **Debugging** page, set **Debugger Type** to **JavaScript (WebView2)** (instead of **Auto** or **Native**). -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 **Ctrl+Shift+I**. Or, right-click the page, and then select `Inspect`. +1. Start the debugger, as usual. For example, in the menu bar, select **Debug** > **Start Debugging (F5)**. + +1. In the running WebView2 app, interact with a webpage that runs the JavaScript code. The debugger pauses on the line of JavaScript code that has the breakpoint. + +1. Use the debugger panes in Visual Studio. + +These steps are detailed below, using the main, Win32/C++ sample (WebView2APISample). ## Requirements -* To debug scripts, the app must be launched from within Visual Studio. +* Clone the WebView2Samples repo, if you want to follow the specific example steps below (using the main, Win32/C++ sample, WebView2APISample). A step below shows how to do this. + +* Install Visual Studio 2022. You can use Visual Studio 2022 to work with the WebView2 sample apps and your own WebView2 app. (Visual Studio 2019 works, as well.) A step below shows how to do this. -* You cannot attach a debugger to a running WebView2 process. +* Install and set up the script debugger tools in Visual Studio. That is, install the **Desktop development with C++** workload of Visual Studio (or the equivalent workload for a different language), including its **JavaScript diagnostics** component. A step below shows how to do this. -* Install Visual Studio 2019 version 16.4 Preview 2 or later. +* Build and run the main, Win32/C++ sample, so that the WebView2APISample app builds and runs (if you want to follow the specific example steps below). A step below shows how to do this. +* To debug scripts, the app must be launched from within Visual Studio. -To debug your code, first install and set up the script debugger tools in Visual Studio, per the following two sections. +* You cannot attach a debugger to a running WebView2 process. ## Install the JavaScript diagnostics component -First, install the **JavaScript diagnostics** component in **Desktop development with C++**, as follows. +Use the **Visual Studio Installer** to install the **Desktop development with C++** workload of Visual Studio, including its **JavaScript diagnostics** component, as follows. Or, if you are using a language workload other than C++, select that workload's **JavaScript diagnostics** component, similar to the below steps. + +1. If not done already, clone the WebView2Samples repo, as described in [Clone the WebView2Samples repo](./machine-setup.md#clone-the-webview2samples-repo) in _Set up your Dev environment for WebView2_. + +1. If not done already, install Visual Studio 2022, as described in [Install Visual Studio](./machine-setup.md#install-visual-studio) in _Set up your Dev environment for WebView2_. + +1. In Visual Studio 2022, install the **Desktop development with C++** workload, as follows: 1. In the Windows Explorer bar, type `Visual Studio Installer`. @@ -43,7 +66,7 @@ First, install the **JavaScript diagnostics** component in **Desktop development 1. In the Visual Studio Installer, on the installed version, click the **More** button, and then select **Modify**. -1. In Visual Studio, under **Workloads**, select the **Desktop Development with C++** setting: +1. In Visual Studio, under **Workloads**, select the **Desktop Development with C++** workload, so that a checkmark appears: ![Visual Studio Modifying Workloads Screen](./debug-visual-studio-images/workloads.png) @@ -51,25 +74,31 @@ First, install the **JavaScript diagnostics** component in **Desktop development 1. In the search box, enter `JavaScript diagnostics`. -1. Select the **JavaScript diagnostics** setting. - -1. Click **Modify**. +1. Select the **JavaScript diagnostics** checkbox: ![Visual Studio: Modifying values in the 'Individual components' tab](./debug-visual-studio-images/indiv-comp.png) +1. Click the **Modify** button. + +Continue with the next section, below. + -## Enable script debugging for WebView2 apps +## Select the JavaScript (WebView2) debugger + +Next, enable script debugging for WebView2 apps, as follows. -Second, enable script debugging for WebView2 apps, as follows. +1. If not done already, do the steps in [Win32 sample app](../samples/webview2apissample.md) so that the WebView2APISample app builds and runs. The **WebView2Samples** solution should be open in Visual Studio, and the sample app should not be running. Or, open your own WebView2 app project in Visual Studio. -1. Right-click your WebView2 project, and then select **Properties**. +1. In Visual Studio, in Solution Explorer, right-click the **WebView2APISample** project (or your own project), and then select **Properties**. -1. Under the **Configuration Properties**, select **Debugging**. + The **Property Pages** dialog opens. -1. Under the **Debugger Type**, select **JavaScript (WebView2)**. +1. On the left, expand **Configuration Properties**, and then select **Debugging**. - ![The 'Debugging' configuration property in Visual Studio](./debug-visual-studio-images/enb-js.png) +1. To the right of **Debugger Type**, select **JavaScript (WebView2)**, and then click the **OK** button: + + ![The "Debugging" > "Local Windows debugger" > "Debugger type" property in Visual Studio](./debug-visual-studio-images/enb-js.png) @@ -77,29 +106,81 @@ Second, enable script debugging for WebView2 apps, as follows. After doing the above setup, debug your WebView2 app, as follows. -1. 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. +1. To set a breakpoint in your source code, hover to the left of the line number, and click to set a breakpoint. For example, open `WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.js`, and set a breakpoint on line 2: `console.log("onAddClick+");`, in the body of the `onAddClick` function: + + ![Running the Local Windows Debugger in Visual Studio](./debug-visual-studio-images/run-local-windows-debugger.png) - ![Adding a breakpoint in Visual Studio](./debug-visual-studio-images/breakpoint.png) + When setting a breakpoint, you must open the file that's in the exact same path that's associated with your WebView2 control, because the JS/TS debug adapter doesn't perform source path mapping. -1. 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. + The breakpoint will be triggered when this section of the code is executed. This breakpoint is triggered upon clicking the **Add a new item** button in the sample app, in a later step below. - ![The Local Windows Debugger in Visual Studio](./debug-visual-studio-images/run.png) +1. Select the bit size of the platform, such as **x64**. -1. In the **Debug Console**, find the output from the debugger. +1. To run the debugger, do any of the following: - ![Debug Console in Visual Studio](./debug-visual-studio-images/console.png) + * In the menu bar, select **Debug** > **Start Debugging (F5)**. + * In Solution Explorer, right-click the project > **Debug** > **Start New Instance** or **Step Into New Instance**. + * Click the green Play button to the left of **Local Windows Debugger**. + + The WebView2APISample app (or your own app) runs and opens, and the debugger connects to the first WebView2 process that's created. In **Properties** > **Debugging** for the project, **Local Windows Debugger** was set to **JavaScript (WebView2)**. + +1. In Visual Studio, click the **Output** tab, in the lower right. + + The tab contains only the following message, which mentions the JS debugger: "Verbose logs are written to: C:\Users\myUsername\AppData\Local\Temp\visualstudio-js-debugger.txt". + +1. In the WebView2APISample app window, select **Scenario** > **Script Debugging** > **JavaScript Local File**. + + The file `WebView2APISample/Debug/x64/assets/ScenarioJavaScriptDebugIndex.html` is rendered: + + ![Rendered HTML file "WebView Script Debugging Example"](./debug-visual-studio-images/webview-script-debugging-example.png) + +1. In Visual Studio, examine the **Output** pane. The following output has been added: + + ``` + This is the very first line of code that executes. + Second + Third + inside + onAddClick+ + onAddClick- + onAddClick+ + onAddClick- + End + ``` + +1. In the webpage in the app, click the **Add a new item** popup button. + + The breakpoint in the `onAddClick` function is hit, and the app is paused in the debugger. + +1. Switch to the Visual Studio window, and examine the debugger panes. + +1. Click the **Output** tab, to display the app's output: + + ![Output tab in Visual Studio 2022 showing output from debugger](./debug-visual-studio-images/output-tab-vs2022.png) + + The app output shows "This is the very first line of code that executes", because of the line `console.log("This is the very first line of code that executes.");` in the file `WebView2Samples\SampleApps\WebView2APISample\assets\ScenarioJavaScriptDebugIndex.html`. ## Troubleshooting - + +#### Open DevTools using an approach other than F12 + +When you debug your app in Visual Studio with the native debugger attached, when viewing your running app, pressing **F12** might start the native debugger instead of starting Developer Tools. + +To open DevTools, press **Ctrl+Shift+I**. Or, right-click the page in the running app, and then select `Inspect`. + + + #### Virtual source path mapping not supported in Visual Studio 2019 If you use the WebView2 [SetVirtualHostNameToFolderMapping](/dotnet/api/microsoft.web.webview2.core.corewebview2.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. +When setting a breakpoint, you must open the file that's in the exact same path that's associated with your WebView2 control, because the JS/TS debug adapter doesn't perform source path mapping. + +Virtual source path mapping is supported by the debugger in Visual Studio Code. diff --git a/microsoft-edge/webview2/how-to/publish-uwp-app-store.md b/microsoft-edge/webview2/how-to/publish-uwp-app-store.md index 16ee5da163..8632d7aef9 100644 --- a/microsoft-edge/webview2/how-to/publish-uwp-app-store.md +++ b/microsoft-edge/webview2/how-to/publish-uwp-app-store.md @@ -89,7 +89,7 @@ Once you're satisfied that your packaged app works, run the Windows App Certific 1. After a few minutes, the Windows App Certification Kit (WACK) shows a results page. If the app failed, click the link to review the results. - + #### Resolving tests The results page of the Windows App Certification Kit (WACK) app shows any tests that need to be resolved. diff --git a/microsoft-edge/webview2/how-to/webresourcerequested.md b/microsoft-edge/webview2/how-to/webresourcerequested.md index 2712825563..7de3a0c0c5 100644 --- a/microsoft-edge/webview2/how-to/webresourcerequested.md +++ b/microsoft-edge/webview2/how-to/webresourcerequested.md @@ -314,7 +314,8 @@ The `NavigateWithWebResourceRequest` method allows your host app to navigate the from https://github.com/MicrosoftEdge/WebView2Feedback/blob/main/specs/NavigateWithWebResourceRequest.md#examples --> - + + ##### [.NET](#tab/dotnet) ```csharp @@ -337,7 +338,7 @@ environment.CreateWebResourceRequest("https://www.w3schools.com/action_page.php" webView.CoreWebView2.NavigateWithWebResourceRequest(webResourceRequest); ``` - + ##### [Win32](#tab/win32) @@ -384,7 +385,7 @@ The following code demonstrates how the `WebResourceResponseReceived` event can - + ##### [.NET](#tab/dotnet) @@ -430,7 +431,7 @@ private async void WebView_WebResourceResponseReceived(object sender, CoreWebVie } ``` - + ##### [Win32](#tab/win32) @@ -479,7 +480,7 @@ m_webView->add_WebResourceResponseReceived( ## API Reference overview - + ##### [.NET](#tab/dotnet) @@ -521,7 +522,7 @@ m_webView->add_WebResourceResponseReceived( * `StatusCode` * `GetContentAsync` - + ##### [Win32](#tab/win32)