I need to get the webview2 in a blazor webview wpf hybrid app to use external js sourcemaps. I cannot just make them internal at build as no control over those JS files.
Now I know from reading https://github.com/MicrosoftEdge/WebView2Feedback/issues/961 that this is a problem and theoretically you can make them inline at runtime using the event WebResourceRequested(object sender, CoreWebView2WebResourceRequestedEventArgs args).
So I tried this code
private void WebView_WebResourceRequested(object sender, CoreWebView2WebResourceRequestedEventArgs args)
{
Debug.WriteLine(args.Request.Uri.ToString());
if (args.Request.Uri.ToString().EndsWith (".js"))
{
var root = System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "wwwroot");
var urlname = args.Request.Uri.ToString().Substring(16).Replace("/", @"\");
var filename = Path.Combine(root, urlname);
var text = File.ReadAllText(filename);
const string mapPattern = @"\/\/\#\s*sourceMappingURL\=.*$";
const string embeddedSourceMappingPrefix = "//# sourceMappingURL=data:application/json;charset:utf-8;base64,";
var match = System.Text.RegularExpressions.Regex.Match(text, mapPattern, System.Text.RegularExpressions.RegexOptions.IgnoreCase);
if (match.Success)
{
var symFile = match.Value.Substring(match.Value.IndexOf('=') + 1).Trim();
var symFilename = Path.Combine(Path.GetDirectoryName(filename), symFile);
if (File.Exists(symFilename))
{
var symBytes = File.ReadAllBytes(symFilename);
var aStringBuilder = new StringBuilder(text);
aStringBuilder.Remove(match.Index, match.Value.Length);
aStringBuilder.Insert(match.Index, embeddedSourceMappingPrefix);
aStringBuilder.Insert(match.Index + embeddedSourceMappingPrefix.Length, System.Convert.ToBase64String(symBytes));
MemoryStream ms = new MemoryStream(System.Text.Encoding.ASCII.GetBytes(aStringBuilder.ToString()));
ManagedStream responseStream = new ManagedStream(ms);
args.Response = (sender as Microsoft.Web.WebView2.Core.CoreWebView2).Environment.CreateWebResourceResponse(responseStream, 200, "OK", "Content-Type: application/javascript");
}
}
}
The code creates an inline source map but it appears not to be honouring the response as in the devtools window I see -
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/xxx.min.js.map: Connection error: Net::ERR_ADDRESS_INVALID
Can anyone provide more insight on this, why is it not taking the response, or another way to get the webview2 to honour external sourcemaps.