How do I Debug blazor wasm asp.net core hosted on Vscode?

Question

I create new Project with Blazor wasm asp.net core hosted, so my project have Client,Server,Shared.

I was originally using Visual Studio to develop, But I wanna turn to VSCode, Cause I use Vscode more.

But I get a problem If I set breakpoint on clinet-side code it will work, Sever-side doesn't work.

my code structure is razor ---> clinet-side interface --> API ---> Server-side Controller ---> Server -side interface to Crud product.

Now I wanna debug Server-sdie code but breakpoint not working.

This is my computer SDK

.NET SDK: Version: 6.0.404 Commit: be4f3ec411

OS ENV: OS Name: Windows OS Version: 10.0.22621 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\6.0.404\

Host: Version: 7.0.1 Architecture: x64 Commit: 97203d38ba

.NET SDKs installed: 6.0.404 [C:\Program Files\dotnet\sdk]

.NET runtimes installed: Microsoft.AspNetCore.App 6.0.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 6.0.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 7.0.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 6.0.12 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

and This is my Server-side launchSetting.json

{
    "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
        "applicationUrl": "http://localhost:30765",
        "sslPort": 44311
      }
    },
    "profiles": {
      "SipposM2.Server": {
        "commandName": "Project",
        "dotnetRunMessages": true,
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "applicationUrl": "https://localhost:7295;http://localhost:5036",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      },
      "IIS Express": {
        "commandName": "IISExpress",
        "launchBrowser": true,
        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      }
    }
  }

VSC launch.json and Tasks.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch and Debug Standalone Blazor WebAssembly App",
            "type": "blazorwasm",
            "request": "launch",
            "cwd": "${workspaceFolder}/SipposM2/Server",
            "browser": "edge",
            "url": "https://localhost:7295",
        },
        {
            "name": "Watch",
            "type": "coreclr",
            "request": "launch",
            "cwd": "${workspaceFolder}/SipposM2/Server",
            "program": "dotnet",
            "args": [
                "watch",
                "--project",
                ".",
                "--verbose" // Let's us confirm browser connects with hot reload capabilities
            ],
            "preLaunchTask": "build" // Ensure we don't watch an unbuilt site
        },
        {
            "name": "Attach",
            "type": "blazorwasm",
            "request": "attach",
            "cwd": "${workspaceFolder}/SipposM2/Server",
            "url": "https://localhost:7295",  // Tell launch where to find site
            "timeout": 120000, // Allows time for the site to launch
        }
    ],
        "compounds": [
        {
            "name": "Debug with Hot Reload",
            "configurations": [ "Watch", "Attach" ]
        }
    ]
}

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "command": "dotnet",
            "type": "process",
            "args": [
                "build",
                "${workspaceFolder}/SipposM2/Server/SipposM2.Server.csproj",
                "/property:GenerateFullPaths=true",
                "/consoleloggerparameters:NoSummary"
            ],
            "problemMatcher": "$msCompile"
        },
        {
            "label": "publish",
            "command": "dotnet",
            "type": "process",
            "args": [
                "publish",
                "${workspaceFolder}/SipposM2/Server/SipposM2.Server.csproj",
                "/property:GenerateFullPaths=true",
                "/consoleloggerparameters:NoSummary"
            ],
            "problemMatcher": "$msCompile"
        },
        {
            "label": "watch",
            "command": "dotnet",
            "type": "process",
            "args": [
                "watch",
                "run",
                "--project",
                "${workspaceFolder}/SipposM2/Server/SipposM2.Server.csproj"
            ],
            "problemMatcher": "$msCompile"
        }
    ]
}

When I really press F5 Vscode will tell me unbound breakpoint.

I tried to add <DebuggerSupport> and <CopyOutputSymbolsToPublishDirectory> in Server.csproj but it doesn't work.

    <DebuggerSupport>true</DebuggerSupport>
    <CopyOutputSymbolsToPublishDirectory>true</CopyOutputSymbolsToPublishDirectory>

Answer 1

It's now Possible to debug a Hosted Application with Blazor Webassembly in VS Code

If you wanna try out, you may create a new Hosted Blazor Webassembly with:

dotnet new blazorwasm -ho

The LaunchSettings will be automatically configured to debug a Blazor Webassemby

But how to debug both Blazor Webassembly and The Hosted Application (Like controllers and etc) ?

in launch.json, add the following configuration:

   "configurations": [
      {
         "name": "Launch and Debug Standalone Blazor WebAssembly App",
         "type": "blazorwasm",
         "request": "launch",
         "cwd": "${workspaceFolder}/Server",
         "hosted": true,
         "program": "${workspaceFolder}/Server/bin/Debug/net7.0/blazorassemblyhostedTest.Server.dll"
      }

The trick is the hosted: true and setting the program DLL pointing to the server dll

You may have to specify the url to listen to:

"url": "https://localhost:5031"

Answer 2

But I get a problem If I set breakpoint on clinet-side code it will work, Sever-side doesn't work.

Well, your configuration seems alright. Although in reagrds of visual studio code we require the following extensions:

1. C# for Visual Studio Code Extension
2. Blazor WASM Debugging Extension

However,currently standalone Blazor WebAssembly allows browser debugging only. You can check here in our official document.

Note: Published, hosted Blazor WebAssembly apps should only enable debugging and copying output symbols when deploying published assets locally. You can check more details here in warning section.