无法调试 Blazor wasm

Question

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

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

我读了all the docs。我怀疑问题是由已知的热重载兼容性错误引起的。

我正在了解所有内容的最新信息。我在 linux (ubuntu 20).

上使用铬

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

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？如果有，请post你的工作配置？

Answer 1

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

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

更新依赖项

确保您使用的是最新的 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 是一款不错的浏览器。这也是一个不错的选择，因为调试工具会在每次会话后关闭浏览器，所以如果我使用我喜欢的浏览器，它每次都会关闭。即使修复了这些错误，我想我还是会保留 Edge 作为 blazor 的“调试浏览器”。

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

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

无法调试 Blazor wasm

Cannot debug Blazor wasm

c#

debugging

asp.net-core

blazor

blazor-webassembly

更新依赖项

安装边缘

更新“独立”项目的配置

在服务器项目中启用 CORS

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

测试

备注