Let WebResourceRequested & VirtualHostNameToFolderMapping handle sourcemap requests from Dev Tools

[wravery]

Is your feature request related to a problem? Please describe.

We use WebResourceRequested to return JS bundles as streams using a custom URL. Anytime we load the script in the dev tools debugger, it says there's a sourcemap but it can't be loaded. I attempted to add a handler for the .js.map URL, but it's never called. In the console output I see a warning that it tried to request the sourcemap over the network and failed.

Describe the solution you'd like and alternatives you've considered

I would like the dev tools sourcemap request to be hooked by WebResourceRequested. It would make debugging much easier.

The best alternative I know of would be to embed the sourcemap inline. But then I need separate debug and release versions of the JS bundle.

AB#31914830

[champnic]

Thanks for the suggestion @wravery - I've added it as a scenario on our backlog. If you have a workaround though I would look at using that for now. It may also be possible using the Chromium Devtools Protocol, maybe with: Debugger.scriptFailedToParse event Debugger.setScriptSource function

ICoreWebView2.CallDevToolsProtocolMethod ICoreWebView2.GetDevToolsProtocolEventReceiver

[aluhrs13]

I'm going to close this - It isn't going to reach a high enough priority. The recommended approach for this scenario would be to index your sourcemaps into Azure DevOps, and configure Edge/WV2 to download them from there; https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/javascript/publish-source-maps-to-azure

[Woofthecat]

We are also having an issue with this., same as #2960.

Tried the Chromium Devtools Protocol approach but strangely there is no warning about the missing source map and the Debugger.scriptFailedToParse event never triggers. Debugger.scriptParsed is triggered and we can see the sourceMapURL being the correct file name, yet the file is never requested.

[SharpEnvelope]

This also seems to be an issue for us. Sourcemaps do not seem to work when they are served via a SetVirtualHostNameToFolder mapping.

[aluhrs13]

Re-opening this due to growth in interest. If folks are adding their input here, please try to include what part of DevTools you're really needing sourcemaps for, there may be better work-arounds.

[gimmi]

This issue is preventing proper debugging experience when developing a web application inside a WebView2 component.

In out case, we serve the HTML content from a WPF application hosting WebView, hese is the initialization code:

await webView.EnsureCoreWebView2Async();
var folderPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "wwwroot");
webView.CoreWebView2.SetVirtualHostNameToFolderMapping("myapp.local", folderPath, CoreWebView2HostResourceAccessKind.Allow);
webView.CoreWebView2.Navigate("http://myapp.local/index.html");

[WilliamYamamoto]

I'm having the same problem: DevTools failed to load source map: Could not load content for https://0.0.0.0/css/bootstrap/bootstrap.min.css.map : Connection error: net::ERR_ADDRESS_INVALID in my .NET MAUI Blazor App

[egegumus]

Also an issue for us.

DevTools failed to load source map: Could not load content for custom_scheme://*.css.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Not getting any *.map requests on WebResourceRequestedEventHandler.

[Franziskus1988]

Same here. The dev tools should definitely pick up the custom scheme, which was set for the main application. We embed an Angular application in WebView2. Inlining the source maps is not possible there and uploading the source maps into Azure Dev Ops is not an option for us.

[stefan1000]

Without source maps the use of a custom protocol results in a really bad development experience, we are back to debugging on the javascript code and manually finding the corresponding sources in typescript. Publishing to azure devops is often (and for us) not an option due to IT security restrictions. I tried to intercept the network calls on the devtools protocol, but it seems that source map loading goes directly to the network stack and cannot be intercepted. Ideally we would like to serve the source maps with the same custom protocol registered in WebView2, if this is not possible we could also go with a devtools callback to provide the sourcemap for a given source map URL.

[Urmeli0815]

We could workaround the problem by embedding the sourcemap in the JS file that is requested. So what we basically do:

• Intercept the WebResourceRequested call for the JS file
• Load the content of the JS file
• Search for sourceMappingURL= at the end of the content and try to get the sourcemap URL from there
• Load the content of the sourcemap file
• Encode the sourcemap content in base64
• Replace the original sourceMappingURL with sourceMappingURL=data:application/json;charset:utf-8;base64, + the base64 encoded sourcemap
• Finish the intercepted WebResourceRequest from step 1

It would be nice if WebView2 would support that out-of-the-box but at least it's possible to get it working with a little bit of effort.

[SparkoUK]

Using a WPFHybrid with the blazor version of the control. An example of how to do that via the WebResourceRequested would be good, as I tried merging the sourcemap for a js file in the args.Response.
still got Source map failed to load.
DevTools cannot show authored sources, but you can debug the deployed code.
Error loading url https://0.0.0.0/lib/viewerui.min.js.map: Connection error: Net::ERR_ADDRESS_INVALID

[harunurhan]

We need this in some local development scenarios, we don't really want to publish all sourcemaps from the local dev builds to somewhere.

I think it's more straightforward for everyone if WebResourceRequested just supported intercepting source map requests done by the devtools.