如何在VSCode中配置.NET Core+Angular调试器？解决API断点未命中问题

Hey there! Let's tackle this .NET Core + Angular debugging issue in VS Code—sounds like you've got the frontend part sorted, but those C# API breakpoints are being stubborn. Let's walk through what's likely going on and how to fix it.

First, Confirm the Basics #

Before diving into configs, let's rule out simple gotchas:

• Make sure you have the C# Dev Kit (or the legacy OmniSharp extension) installed in VS Code—this is non-negotiable for debugging .NET Core.
• Verify your API project is set to Debug mode (not Release). Check the dropdown in the VS Code status bar, or ensure your .csproj has <DebugType>full</DebugType> under the Debug property group.
• Double-check that your API is actually running when you hit endpoints from Angular. Test the API directly with Postman or a browser to confirm it responds—if it's not running, breakpoints won't trigger.

Fix Your launch.json Configuration #

Your existing config might be missing key details for the .NET Core API. Here's a working setup that handles both API and Angular debugging:

Step 1: Update launch.json #

Open the .vscode/launch.json file and replace (or add) these configurations:

{
  "version": "0.2.0",
  "configurations": [
    // Debug .NET Core API
    {
      "name": ".NET Core Launch (API)",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      // Update this path to match your API project's DLL location
      "program": "${workspaceFolder}/YourApiProjectName/bin/Debug/net7.0/YourApiProjectName.dll",
      "args": [],
      "cwd": "${workspaceFolder}/YourApiProjectName",
      "stopAtEntry": false,
      "serverReadyAction": {
        "action": "openExternally",
        "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
      },
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "sourceFileMap": {
        "/Views": "${workspaceFolder}/Views"
      }
    },
    // Debug Angular (your existing config might look similar)
    {
      "name": "Angular Launch",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/YourAngularProjectName/src",
      "sourceMaps": true
    }
  ]
}

• Replace YourApiProjectName and net7.0 with your actual project name and .NET version (e.g., net6.0).
• The preLaunchTask ensures your API builds before launching—you'll need a matching task in tasks.json.

Step 2: Add a Build Task to tasks.json #

Create or update .vscode/tasks.json to include a build task for your API:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet build",
      "type": "shell",
      "args": [
        "${workspaceFolder}/YourApiProjectName/YourApiProjectName.csproj"
      ],
      "group": "build",
      "presentation": {
        "reveal": "silent"
      },
      "problemMatcher": "$msCompile"
    }
  ]
}

If You're Using the .NET SPA Template #

If you created your project with dotnet new angular (which bundles .NET and Angular), you can use a single configuration to launch both:

{
  "name": ".NET Core Launch (SPA)",
  "type": "coreclr",
  "request": "launch",
  "preLaunchTask": "build",
  "program": "${workspaceFolder}/YourSpaProject/bin/Debug/net7.0/YourSpaProject.dll",
  "args": [],
  "cwd": "${workspaceFolder}/YourSpaProject",
  "stopAtEntry": false,
  "serverReadyAction": {
    "action": "openExternally",
    "pattern": "\\bNow listening on:\\s+(https?://\\S+)",
    "uriFormat": "%s/swagger"
  },
  "env": {
    "ASPNETCORE_ENVIRONMENT": "Development",
    "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
  },
  "sourceFileMap": {
    "/Views": "${workspaceFolder}/Views"
  }
}

This setup lets .NET handle launching Angular automatically, and your debugger will attach to both the API and frontend.

Troubleshooting Stubborn Breakpoints #

If breakpoints are still grayed out or not triggering:

• Check PDB files: Ensure your build generates .pdb files (they should be in the same folder as your DLL). If not, add <DebugType>full</DebugType> to your .csproj under the Debug property group.
• Verify API endpoint matches: Make sure Angular is sending requests to the exact URL your API is listening on (e.g., if your API runs on https://localhost:5001, Angular's baseUrl should point here).
• Restart the debugger: Sometimes hot reload can cause PDB mismatches. Try stopping debugging, cleaning your build (dotnet clean), rebuilding, and launching again.
• Attach to process manually: If launching via launch.json fails, use the command palette (Ctrl+Shift+P) to run .NET: Attach to Process, find the dotnet process for your API, and attach it directly.

内容的提问来源于stack exchange，提问作者haydnD