在 ASP.Net Core Razor 中托管 WASM 应用程序时如何启用 WASM 调试

Question

我正在构建一个白标 .Net 8 WASM-only Blazor 应用程序，该应用程序分配有多个域。这意味着我希望能够将不同的主题和图标等注入托管文件以及应用程序中的不同菜单选项。

我使用的是 Index.razor 页面，而不是 index.html，这样我就可以动态控制 HTML 内容。该服务器还托管我的 Blazor 应用程序的 API 端点。

花了一段时间才获得一个独立创建的 ASP.Net Razor 应用程序来与 Blazor WASM 应用程序一起使用，但我无法在 WASM 应用程序代码中进行任何调试。即没有断点有效/命中。服务器代码断点就可以了。

服务器项目“项目引用”WASM 项目，该项目会在构建时自动将应用程序迁移到托管服务器。

当您创建 .Net 7 托管的 Blazor WASM 应用程序时，一切就正常了。服务器 和 WASM 客户端断点可以正常工作。

问题：连接客户端和服务器应用程序以便在两者中都可以进行调试的魔力是什么？

Answer 1

借助 CoPilot 的有用提示和解释，以及后来将工作项目与我的弗兰肯斯坦怪物进行的比较，终于弄清楚了。需要进行多项设置。

首先，托管服务器项目中

launchSettings.json

中“profiles”中的每个配置文件应添加以下条目：

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",

第二个问题是运行时连接到该调试端点时出错。这是由于

launchSettings.json

的“iisSettings”部分的 SSL 端口与

"https"

配置文件

applicationUrl

端口设置不匹配造成的。

launchSettings.json

的完整示例如下所示：

{
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:5160",
      "sslPort": 7184
    }
  },
  "profiles": {
    "https": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7184;http://localhost:5160",
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

成功的最后一个要素是在客户端应用程序中的

app.UseWebAssemblyDebugging()

中添加

program.cs

，很容易被忽视：

   if (app.Environment.IsDevelopment())
   {
       app.UseWebAssemblyDebugging();
   }