[browser] Update wasmbrowser template (#116690)

Author: maraf

src/mono/wasm/host/DevServer/WebAssemblyNetDebugProxyAppBuilderExtensions.cs

@@ -18,6 +18,7 @@
 using System.Web;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Http.Extensions;
 
 namespace Microsoft.WebAssembly.AppHost.DevServer;
 
@@ -428,9 +429,31 @@ private string GetDevToolsUrlWithProxy(BrowserTab tabToDebug)
     {
         var underlyingV8Endpoint = new Uri(tabToDebug.WebSocketDebuggerUrl);
         var proxyEndpoint = new Uri(_debugProxyUrl);
-        var devToolsUrlAbsolute = new Uri(_browserHost + tabToDebug.DevtoolsFrontendUrl);
+        var devToolsUrlAbsolute = new Uri(new Uri(_browserHost), relativeUri: NormalizeDevtoolsFrontendUrl(tabToDebug.DevtoolsFrontendUrl));
         var devToolsUrlWithProxy = $"{devToolsUrlAbsolute.Scheme}://{devToolsUrlAbsolute.Authority}{devToolsUrlAbsolute.AbsolutePath}?{underlyingV8Endpoint.Scheme}={proxyEndpoint.Authority}{underlyingV8Endpoint.PathAndQuery}";
         return devToolsUrlWithProxy;
+
+        static string NormalizeDevtoolsFrontendUrl(string devtoolsFrontendUrl)
+        {
+            // Currently frontend url can be:
+            // - absolute (since v135 of chrome and edge)
+            //      chrome example: https://chrome-devtools-frontend.appspot.com/serve_rev/@031848bc6ad02b97854f3d6154d3aefd0434756a/inspector.html?ws=localhost:9222/devtools/page/719FE9D3B43570193235446E0AB36859
+            //      edge example: https://aka.ms/docs-landing-page/serve_rev/@4e2c41645f24197463afa2ab6aa999352ee8255c/inspector.html?ws=localhost:9222/devtools/page/3A4D56E09776321628432588FC9299F4
+            // - relative (managed as fallback for brosers with prior version)
+            //      example: /devtools/inspector.html?ws=localhost:9222/devtools/page/DAB7FB6187B554E10B0BD18821265734
+            // The absolute url can't be used as-is because is not valid for debugging and cannot be made relative because of lack "devtools" segment
+            // before "inspector.html" but we can keep the query string and append to the default "devtools/inspector.html" browser devtools page
+
+            const string DefaultBrowserDevToolsPagePath = "devtools/inspector.html";
+
+            if (devtoolsFrontendUrl.AsSpan().TrimStart('/').StartsWith(DefaultBrowserDevToolsPagePath))
+            {
+                return devtoolsFrontendUrl;
+            }
+
+            UriHelper.FromAbsolute(devtoolsFrontendUrl, out _, out _, out _, out var query, out _);
+            return $"{DefaultBrowserDevToolsPagePath}{query}";
+        }
     }
 
     private string GetLaunchChromeInstructions(string targetApplicationUrl)

src/mono/wasm/templates/templates/browser/browser.0.csproj

@@ -4,4 +4,8 @@
     <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
     <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
   </PropertyGroup>
+
+  <ItemGroup>
+    <StaticWebAssetFingerprintPattern Include="JS" Pattern="*.js" />
+  </ItemGroup>
 </Project>