c# - 无法调试 Blazor wasm

Question

我正在使用 vscode。我无法调试“独立”(或“托管”)blazor wasm。

有很多这样的问题，但它们是针对 RC、显然已为 .NET 6 修复的错误，或显然已在 SDK 6.0.102 中修复的工具错误。

我读了all docs .我怀疑已知的热重载兼容性错误使问题更加复杂。

我了解最新的一切。我在 Linux (ubuntu 20) 上使用 Chromium。

当我尝试调试时，我在弹出窗口中收到此错误:

Unable to launch browser: "Failed to launch browser!
ERROR:sandbox_linux.cc(377)] InitializeSandbox() called with multiple threads in process gpu-process.
WARNING: Kernel has no file descriptor comparison support: Operation not permitted
ERROR:process_singleton_posix.cc(341)] Failed to create /home/username/.config/Code/User/workspaceStorage/4208cd9cd69c4fe2a941aed538319caa/ms-vscode.js-debug/.profile/SingletonLock: Permission denied (13)
ERROR:chrome_browser_main.cc(1432)] Failed to create a ProcessSingleton for your profile directory. This means that running multiple instances would start multiple browser processes rather than opening a new window in the existing process. Aborting now to avoid profile corruption.
TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

错误没有帮助，因为我为该目录执行了 chmod 777，但它仍然提示权限问题。我也遇到了其他错误，也很神秘。

我想知道这是否可能，因为在搜索了数十个 SO 问题和 repo 问题之后，我找不到任何人声称拥有有效的设置并且可以显示有效的配置。

所以:有没有人真正设法让它工作:blazor(独立的，但托管也很好)、vscode、热重载、linux？如果有，请发布您的工作配置？

Answer 1

我设法让它与 Microsoft 的 Edge 浏览器一起工作。

虽然我在 Linux 上使用 VSCode，但在 Windows/Mac 上使用 Visual Studio 应该是类似的，因为我相信基于 Roslyn 的底层工具是相同的。

更新依赖

确保您使用的是最新的 SDK 版本:6.0.202。使用 dotnet --version 检查。

安装边缘

• 获取二进制文件 from here (Linux、Mac、Windows)
• 如果您使用的是 Linux，您可以 1) 使用 deb/rpm 二进制文件，或 2) 包管理器选项(对于 debian/ubuntu):

  curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
  sudo install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/
  sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/edge stable main" > /etc/apt/sources.list.d/microsoft-edge-stable.list'
  sudo rm microsoft.gpg
  sudo apt update && sudo apt install microsoft-edge-stable
  

更新“独立”项目的配置

MyProject/Properties/launchSettings.json:

{
  "profiles": {
    "Standalone": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:6000;http://localhost:6001",           // <------
      "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" }
    }
  }
}

MyProject/.vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch and Debug Standalone Blazor WebAssembly App",
      "type": "blazorwasm",
      "request": "launch",
      "browser": "edge",                 // <------
      "url": "http://localhost:6001"     // <------
    }
  ]
}

在服务器项目中启用 CORS

配置服务时:

if(_environment.IsDevelopment()) {
  // allow all localhost ports
  services.AddCors(o => o.AddPolicy("BlazorCorsPolicy", b => b.SetIsOriginAllowed(s => new Uri(s).IsLoopback)));
  // or, explicitly allow client's address only
  //services.AddCors(o => o.AddPolicy("BlazorCorsPolicy", b => b.WithOrigins("http://localhost:6001")));
}
else {
  //...
}

配置中间件管道时:

app.UseRouting();
app.UseCors("BlazorCorsPolicy");            // <------
app.UseAuthentication();
app.UseAuthorization();

在blazor项目中设置服务器地址

更新由 blazor 模板生成的代码(仅作为示例，使用您的 服务器地址):

//builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
  builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://localhost:5001/api/v1/") });

测试

在blazor项目中设置一些断点，然后按F5。

注意事项

我为客户端使用了端口 6000 和 6001，因为服务器可能已经在使用 5000 和 5001.

我发现 Edge 是一款不错的浏览器。这也是一个不错的选择，因为调试工具会在每次 session 后关闭浏览器，所以如果我使用我喜欢的浏览器，它每次都会关闭。即使修复了这些错误，我想我仍会将 Edge 作为我的 blazor 的“调试浏览器”。

调试体验并不完美:有时在开始调试时它会说“浏览器似乎已经从旧的调试 session 运行。请在尝试调试之前关闭它，否则 VS Code 可能无法连接到它” - 只需点击“仍然调试”。

我无法让调试和热重载同时工作。我在 repo 或文档站点的某处读到尚不支持这种情况(但将在未来的补丁版本或 .NET 7 中支持)。