Skip to content

Commit

Permalink
inc rvw
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikehoffms
mikehoffms committed Feb 22, 2025
1 parent 8e9cc40 commit 0032bc5
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 37 deletions.
26 changes: 14 additions & 12 deletions microsoft-edge/webview2/concepts/working-with-local-content.md
View file
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: 04/10/2024
ms.date: 02/21/2025
---
# Using local content in WebView2 apps

Expand Down Expand Up @@ -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.
<!-- ---------- -->
Expand All @@ -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`<!-- todo: virtual host name mapping? compare similar sections in this 4 and maybe 3 other files --> 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.
<!-- ------------------------------ -->
Expand Down Expand Up @@ -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).
Expand All @@ -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
<!-- ---------- -->
Expand Down Expand Up @@ -496,25 +496,27 @@ 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.
* Compiled CSS, such as SASS or SCSS.
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)
Expand Down
20 changes: 17 additions & 3 deletions microsoft-edge/webview2/how-to/debug-devtools.md
View file
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: 07/07/2022
ms.date: 02/21/2025
---
# Debug WebView2 apps with Microsoft Edge DevTools

Expand Down Expand Up @@ -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
Expand Down
42 changes: 26 additions & 16 deletions microsoft-edge/webview2/how-to/debug-visual-studio-code.md
View file
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/11/2022
ms.date: 02/21/2025
---
# Debug WebView2 apps with Visual Studio Code

Expand All @@ -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",
Expand All @@ -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 `<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. See [WewbView2 browser flags](../concepts/webview-features-flags.md) for more information.

<!-- ---------------------------------- -->
#### Command-line URL parameter passed in
Expand Down Expand Up @@ -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.


<!-- ---------------------------------- -->
Expand All @@ -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.
Expand Down Expand Up @@ -146,7 +143,6 @@ 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)

> 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
Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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
Expand Down
14 changes: 8 additions & 6 deletions microsoft-edge/webview2/how-to/debug-visual-studio.md
View file
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: 09/17/2024
ms.date: 02/21/2025
---
# Debug WebView2 apps with Visual Studio

Expand Down Expand Up @@ -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_.
Expand Down

0 comments on commit 0032bc5

Please sign in to comment.