Debugging documentation doesn't address virtual host name mapping

[jaredkrinke]

Link to the documentation page:
https://docs.microsoft.com/en-us/microsoft-edge/webview2/how-to/debug-visual-studio-code

Description of the issue:

The example launch.json sets the URL to a "file" protocol URL, but the WebView2 "getting started" docs suggest using SetVirtualHostNameToFolderMapping to map HTTP URLs to local folders.

How do you tell VS Code that "https://example.com/" is actually loaded from the file system, e.g. for loading source maps?

When I attempt to debug my WebView2 app which has a script mapped to "https://example.com/index.js", VS Code actually tries to request the source map from "https://example.com/index.js.map" instead of reading from my local file system, which makes me think that additional flags in the launch.json file are required.

Given that virtual host name mapping seems to be recommended, the debugging instructions should cover how to debug mapped files.

AB#41242137

[captainbrosset]

Thanks for reaching out.
I'll create a task on our backlog to address the documentation changes you commented on.
But also, in the meantime, let me ping @champnic here as he may be able to help you with your question.

[jaredkrinke]

Thanks!

For the record, I was eventually able to get debugging via VS Code working on my app (which uses TypeScript, is bundled via Parcel 2, and runs inside a WebView2 that uses SetVirtualHostNameToFolderMapping). I ended up having to set url, webRoot, pathMapping, and sourceMapPathOverrides. This might not be the correct solution, but I'm linking it here for reference: https://gist.github.com/jaredkrinke/875d8f8435a3507550efeb6323e4fa34

[captainbrosset]

Thanks for sharing. This might be very useful to others.