diff --git a/microsoft-edge/webview2/concepts/working-with-local-content.md b/microsoft-edge/webview2/concepts/working-with-local-content.md index 2390adfe75..a4bc67c53e 100644 --- a/microsoft-edge/webview2/concepts/working-with-local-content.md +++ b/microsoft-edge/webview2/concepts/working-with-local-content.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: webview -ms.date: 04/10/2024 +ms.date: 02/21/2025 --- # Using local content in WebView2 apps @@ -353,13 +353,13 @@ When loading local content via a virtual host name mapping, you are mapping a vi ###### Additional web resources -Local content that's loaded via virtual host name mapping has an HTTP or HTTPS URL which supports relative URL resolution. This means that the loaded document can have references to additional web resources such as CSS, script, or image files which are also served via virtual host name mapping, except [source maps](#source-maps-with-virtual-host-name-mapping). +Local content that's loaded via virtual host name mapping has an HTTP or HTTPS URL which supports relative URL resolution. This means that the loaded document can have references to additional web resources such as CSS, script, or image files which are also served via virtual host name mapping, except source maps; see [Source maps with virtual host name mapping](#source-maps-with-virtual-host-name-mapping), below. ###### Additional web resources resolved in WebView2 process -Virtual host name URLs are resolved in WebView2 processes. This is a faster option than `WebResourceRequested`, which resolves in the host app process UI thread. +Virtual host name URLs are resolved in WebView2 processes. This is a faster option than `WebResourceRequested`, which resolves in the host app process UI thread. @@ -371,13 +371,13 @@ Source maps are needed to debug the source code of compiled content, such as: WebView2 doesn't load source maps that are referenced by content which was loaded by using virtual host name mapping. -Consider the following example. WebView2 loads JavaScript file `main.js` via virtual host name mapping. If `main.js` references `main.js.map` as its source map, then `main.js.map` will neither be loaded automatically nor any `WebResourceRequested` event handler will be called to load it. +For example, suppose WebView2 loads `main.js` via virtual host name mapping. If `main.js` references `main.js.map` as its source map, `main.js.map` will not be loaded automatically. To use source maps along with virtual host name mapping, choose one of the following approaches: * Generate inline source maps during compilation of your content. Inline source maps are embedded to the corresponding compiled file. -* Use `WebResourceRequested` event instead, and inline separate source maps to the content at runtime in your `WebResourceRequested` event handler. Use this approach only if your content build system does not support inline source maps. +* Use `WebResourceRequested` event instead, and inline separate source maps to the content at runtime in your `WebResourceRequested` event handler. Use this approach only if your build system does not support inline source maps. @@ -440,7 +440,7 @@ webView->Navigate(L"https://demo/index.html"); -## Loading local content by handling the WebResourceRequested event +## Loading local content by handling the `WebResourceRequested` event Another way you can host local content in a WebView2 control is by relying on the `WebResourceRequested` event. This event is triggered when the control attempts to load a resource. You can use this event to intercept the request and provide the local content, as described in [Custom management of network requests](../how-to/webresourcerequested.md). @@ -456,7 +456,7 @@ If you want to use a custom scheme to make the Web Resource Request that generat -#### Considerations for loading local content by handling the WebResourceRequested event +#### Considerations for loading local content by handling the `WebResourceRequested` event @@ -496,7 +496,7 @@ This can take some time. Make sure to limit calls to `AddWebResourceRequestedFil -###### Source maps with WebResourceRequested event +###### Source maps with the `WebResourceRequested` event Source maps are needed to debug the source code of compiled content, such as: * Transpiled JavaScript, such as TypeScript or minified JavaScript. @@ -504,17 +504,19 @@ Source maps are needed to debug the source code of compiled content, such as: WebView2 doesn't load source maps that are referenced by content which was loaded by using the `WebResourceRequested` event. -Consider the following example. You load JavaScript file `main.js` in your `WebResourceRequested` event handler by setting the `CoreWebView2WebResourceRequestedEventArgs.Response` property. If `main.js` references `main.js.map` as its source map, then `main.js.map` will neither be loaded automatically, nor will your `WebResourceRequested` event handler be called again to load it. +For example, suppose you load `main.js` in your `WebResourceRequested` event handler by setting the `Response` property in `CoreWebView2WebResourceRequestedEventArgs`. If `main.js` references `main.js.map` as its source map: +* `main.js.map` will not be loaded automatically. +* Your `WebResourceRequested` event handler will not be called again to load `main.js.map`. -To use source maps along with `WebResourceRequested`, choose one of the following approaches: +To use source maps along with `WebResourceRequested`, use one of the following approaches: * Generate inline source maps during compilation of your content. Inline source maps are embedded to the corresponding compiled file. -* Inline separate source maps to the content at runtime in your `WebResourceRequested` event handler. Use this approach only if your content build system does not support inline source maps. +* Inline separate source maps to the content at runtime in your `WebResourceRequested` event handler. Use this approach only if your build system does not support inline source maps. -#### APIs for loading local content by handling the WebResourceRequested event +#### APIs for loading local content by handling the `WebResourceRequested` event ##### [.NET/C#](#tab/dotnetcsharp) diff --git a/microsoft-edge/webview2/how-to/debug-devtools.md b/microsoft-edge/webview2/how-to/debug-devtools.md index 842ae70b09..9d94ede4ea 100644 --- a/microsoft-edge/webview2/how-to/debug-devtools.md +++ b/microsoft-edge/webview2/how-to/debug-devtools.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: webview -ms.date: 07/07/2022 +ms.date: 02/21/2025 --- # Debug WebView2 apps with Microsoft Edge DevTools @@ -38,10 +38,24 @@ An app can also use the `OpenDevToolsWindow` API to programmatically open a DevT If none of the above approaches are available, you can add `--auto-open-devtools-for-tabs` to the browser arguments via an environment variable or registry key. This approach will open a DevTools window when a WebView2 is created. + -## Source maps with `WebResourceRequested` event or virtual host name mapping +## Source maps with the `WebResourceRequested` event or virtual host name mapping + +Source maps are needed to debug the source code of compiled content, such as: +* Transpiled JavaScript, such as TypeScript or minified JavaScript. +* Compiled CSS, such as SASS or SCSS. + +WebView2 doesn't load source maps that are referenced by content which was loaded by using either approach: + +* The `WebResourceRequested` event. See: + * [Loading local content by handling the `WebResourceRequested` event](../concepts/working-with-local-content.md#loading-local-content-by-handling-the-webresourcerequested-event) in _Using local content in WebView2 apps_. + * [Source maps with the `WebResourceRequested` event](../concepts/working-with-local-content.md#source-maps-with-the-webresourcerequested-event) in _Using local content in WebView2 apps_. + +* Virtual host name mapping. See: + * [Loading local content by using virtual host name mapping](../concepts/working-with-local-content.md#loading-local-content-by-using-virtual-host-name-mapping) in _Using local content in WebView2 apps_. + * [Source maps with virtual host name mapping](../concepts/working-with-local-content.md#source-maps-with-virtual-host-name-mapping) in _Using local content in WebView2 apps_. -Source maps are needed to debug the source code of compiled content like transpiled JavaScript (e.g. TypeScript, minified JavaScript) or CSS (e.g. SASS, SCSS). WebView2 does not load source maps referenced by content which was loaded using either [WebResourceRequested event](../concepts/working-with-local-content.md#loading-local-content-by-handling-the-webresourcerequested-event) or [virtual host name mapping](../concepts/working-with-local-content.md#loading-local-content-by-using-virtual-host-name-mapping). See details and solutions for [WebResourceRequested event here](../concepts/working-with-local-content.md#source-maps-with-virtual-host-name-mapping), and for [virtual host name mapping here](../concepts/working-with-local-content.md#source-maps-with-virtual-host-name-mapping). ## See also 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 6244f2f953..13a3c4090a 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/11/2022 +ms.date: 02/21/2025 --- # Debug WebView2 apps with Visual Studio Code @@ -17,9 +17,9 @@ Visual Studio Code has a built-in debugger for browser debugging. See [Browser ## Create a launch.json file -To debug your code, your project is required to have a `launch.json` file. A `launch.json` file is a debugger configuration file to configure and customize the Visual Studio Code debugger. One of the properties that's needed to configure the debugger is the `request` property. There are two `request` types, `launch` and `attach`. +To debug your code, your project must have a `launch.json` file. A `launch.json` file is a debugger configuration file to configure and customize the Visual Studio Code debugger. One of the properties that's needed to configure the debugger is the `request` property. There are two `request` types: `launch` and `attach`. -The following code demonstrates launching the app from Visual Studio Code (rather than attaching the debugger to a running instance of the app). To do this, the app must have been built previously. If your project doesn't have a `launch.json` file, create a new `launch.json` file in the `.vscode` subfolder in your current project and paste the following code into it: +The following code demonstrates launching the app from Visual Studio Code (rather than attaching the debugger to a running instance of the app). To do this, the app must have been built previously. If your project doesn't have a `launch.json` file, create a new `launch.json` file in the `.vscode` subfolder in your current project, and paste the following code into it: ```json "name": "Hello debug world", @@ -28,20 +28,16 @@ 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 + // 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. +// 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 containing all your code files. "url": "file:///${workspaceFolder}/path/to/your/toplevel/foo.html", "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 @@ -91,7 +87,7 @@ Open `launch.json` and complete the following actions to use targeted WebView2 d "urlFilter": "file://C:/path/to/my/index.ts", ``` -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. +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. @@ -113,7 +109,8 @@ 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. @@ -146,7 +143,6 @@ 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 @@ -176,7 +172,7 @@ Saving debug output to a log file: ,"trace": "verbose" // Turn on verbose tracing in the Debug Output pane. ``` -Visual Studio Code Debug Output with verbose tracing turned on: +Visual Studio Code output in the **DEBUG CONSOLE** pane, with verbose tracing turned on: ![Visual Studio Code Debug Output with verbose tracing turned on](./debug-visual-studio-code-images/verbose.png) @@ -222,10 +218,24 @@ If you're debugging Office Add-ins, open the add-in source code in a separate in ![Run and Debug](./debug-visual-studio-code-images/attach-uwp.png) + -## Source maps with `WebResourceRequested` event or virtual host name mapping +## Source maps with the `WebResourceRequested` event or virtual host name mapping + +Source maps are needed to debug the source code of compiled content, such as: +* Transpiled JavaScript, such as TypeScript or minified JavaScript. +* Compiled CSS, such as SASS or SCSS. + +WebView2 doesn't load source maps that are referenced by content which was loaded by using either approach: + +* The `WebResourceRequested` event. See: + * [Loading local content by handling the `WebResourceRequested` event](../concepts/working-with-local-content.md#loading-local-content-by-handling-the-webresourcerequested-event) in _Using local content in WebView2 apps_. + * [Source maps with the `WebResourceRequested` event](../concepts/working-with-local-content.md#source-maps-with-the-webresourcerequested-event) in _Using local content in WebView2 apps_. + +* Virtual host name mapping. See: + * [Loading local content by using virtual host name mapping](../concepts/working-with-local-content.md#loading-local-content-by-using-virtual-host-name-mapping) in _Using local content in WebView2 apps_. + * [Source maps with virtual host name mapping](../concepts/working-with-local-content.md#source-maps-with-virtual-host-name-mapping) in _Using local content in WebView2 apps_. -Source maps are needed to debug the source code of compiled content like transpiled JavaScript (e.g. TypeScript, minified JavaScript) or CSS (e.g. SASS, SCSS). WebView2 does not load source maps referenced by content which was loaded using either [WebResourceRequested event](../concepts/working-with-local-content.md#loading-local-content-by-handling-the-webresourcerequested-event) or [virtual host name mapping](../concepts/working-with-local-content.md#loading-local-content-by-using-virtual-host-name-mapping). See details and solutions for [WebResourceRequested event here](../concepts/working-with-local-content.md#source-maps-with-virtual-host-name-mapping), and for [virtual host name mapping here](../concepts/working-with-local-content.md#source-maps-with-virtual-host-name-mapping). ## Troubleshoot the debugger diff --git a/microsoft-edge/webview2/how-to/debug-visual-studio.md b/microsoft-edge/webview2/how-to/debug-visual-studio.md index 6ce09774f9..80c92f6938 100644 --- a/microsoft-edge/webview2/how-to/debug-visual-studio.md +++ b/microsoft-edge/webview2/how-to/debug-visual-studio.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: webview -ms.date: 09/17/2024 +ms.date: 02/21/2025 --- # Debug WebView2 apps with Visual Studio @@ -162,16 +162,18 @@ After doing the above setup, debug your WebView2 app, as follows. -## Source maps with `WebResourceRequested` event or virtual host name mapping +## Source maps with the `WebResourceRequested` event or virtual host name mapping Source maps are needed to debug the source code of compiled content, such as: * Transpiled JavaScript, such as TypeScript or minified JavaScript. -* CSS, such as SASS or SCSS. +* Compiled CSS, such as SASS or SCSS. + +WebView2 doesn't load source maps that are referenced by content which was loaded by using either approach: -WebView2 doesn't load source maps that are referenced by content which was loaded by using either: * The `WebResourceRequested` event. See: - * [Loading local content by handling the WebResourceRequested event](../concepts/working-with-local-content.md#loading-local-content-by-handling-the-webresourcerequested-event) in _Using local content in WebView2 apps_. - * [Source maps with WebResourceRequested event](../concepts/working-with-local-content.md#source-maps-with-webresourcerequested-event) in _Using local content in WebView2 apps_. + * [Loading local content by handling the `WebResourceRequested` event](../concepts/working-with-local-content.md#loading-local-content-by-handling-the-webresourcerequested-event) in _Using local content in WebView2 apps_. + * [Source maps with the `WebResourceRequested` event](../concepts/working-with-local-content.md#source-maps-with-the-webresourcerequested-event) in _Using local content in WebView2 apps_. + * Virtual host name mapping. See: * [Loading local content by using virtual host name mapping](../concepts/working-with-local-content.md#loading-local-content-by-using-virtual-host-name-mapping) in _Using local content in WebView2 apps_. * [Source maps with virtual host name mapping](../concepts/working-with-local-content.md#source-maps-with-virtual-host-name-mapping) in _Using local content in WebView2 apps_.