如何从开发容器中调试 Blazor WASM 客户端？

问：

这是问题 77483656 的结果

我有一个在开发容器中托管（调试）的 .NET Blazor WebAssembly Web 应用。

我可以在开发容器中轻松调试服务器端。我正在尝试弄清楚如何在此特定设置中调试客户端。

注意：在这里，我对调试的定义是指在 IDE （VS Code） 中设置断点，并让 IDE 在该断点处停止以检查变量、单步执行代码等。是的，可以在 WASM 客户端进行控制台日志记录，这就是我到目前为止一直在调试的方式，但这变得非常乏味且不可持续。

注意：若要重现此设置，请按照下列步骤操作：

1. 确保 VS Code 已安装开发容器扩展

2. 使用以下方法创建新的 blazor wasm 项目：

   # Mandatory setup of project
   dotnet new blazorwasm --hosted --name=my-pwa --output=my-pwa
   
   # Optional setup of git
   cd my-pwa
   dotnet new gitignore
   git init
   git commit -m "Initial Commit"
   

3. 在 VS Code 中打开

4. 在 VS Code 中，使用命令 pallette 添加开发容器配置文件Dev Containers: Add Dev Container Configuration Files...

5. 选择“C# （.NET） 模板”，并在系统提示时选择默认值

6. 在窗口右下角的 VS Code 通知上选择“在容器中重新打开”

我尝试使用以下命令在后台手动运行 dotnet 应用程序：

dotnet watch run --project=Server --non-interactive --no-hot-reload

这样，我就可以在开发容器外部的本地浏览器中打开 Blazor WASM Web 应用。

然后使用以下配置将客户端调试为独立的 Blazor WASM 应用："launch.json"

{
    "name": "Launch and Debug Standalone Blazor WebAssembly App",
    "type": "blazorwasm",
    "request": "launch",
    "preLaunchTask": "dotnet: build",
    "browser": "edge",
    "hosted": false,
    "url": "http://localhost:5678"
},

但这显示了 VS Code 内部的错误，指出无法连接。当它不显示错误时，它不会显示允许调试的 Web 端客户端源代码。