Debug both Typescript & C# in VSCode in same session

Question

If I create a project using "dotnet new angular", I can debug both the C# and Typescript code in Visual Studio 2017. But within Visual Studio Code, I can only debug the C#. When I try to place a breakpoint on any Typescript instruction, it says: "No symbols have been loaded for this document". Since it works fine in VS 2017, it seems to me that the Typescript configuration should be OK.

When I open the project in VSCode, it says "Required assets to build and debug are missing from your project. Add them?" I answer "yes" and then it adds the ".vscode" folder containing launch.json and tasks.json. Perhaps it is not adding the correct launch configuration for the debugger? The only configurations in launch.json are for ".NET Core Launch (web)" and ".NET Core Attach".

I have the Debugger for Chrome 3.5.0 extension installed.

This is the launch.json that is generated:

   {
   "version": "0.2.0",
   "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            // If you have changed target frameworks, make sure to update the program path.
            "program": "${workspaceFolder}/bin/Debug/netcoreapp2.0/spa.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart",
            "launchBrowser": {
                "enabled": true,
                "args": "${auto-detect-url}",
                "windows": {
                    "command": "cmd.exe",
                    "args": "/C start ${auto-detect-url}"
                },
                "osx": {
                    "command": "open"
                },
                "linux": {
                    "command": "xdg-open"
                }
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        },
        {
            "name": ".NET Core Attach",
            "type": "coreclr",
            "request": "attach",
            "processId": "${command:pickProcess}"
        }
    ]
}

Answer 1

这是 VSCode 生成的 launch.json 文件的问题。我需要为 Chrome 调试器添加配置。我还需要添加一个“复合”配置，以便在同一会话中调试 C# 和 Typescript。以下是所需的附加配置。选择“全栈”配置来调试 C# 和 Typescript。

感谢 auchenberg 在 Github 上的 Microsoft/vscode-recipes 存储库中的帮助，我找到了解决方案。我创建了一个拉取请求来添加这个新食谱。（参见： https: //github.com/Microsoft/vscode-recipes/tree/master/Angular-SpaTemplates）

所需的额外配置是：

    {
        "name": ".NET Core Launch (full)",
        "type": "coreclr",
        "request": "launch",
        "preLaunchTask": "build",
        // If you have changed target frameworks, make sure to update the program path.
        "program": "${workspaceFolder}/bin/Debug/netcoreapp2.0/spa.dll",
        "args": [],
        "cwd": "${workspaceFolder}",
        "stopAtEntry": false,
        "internalConsoleOptions": "openOnSessionStart",
        "launchBrowser": {
            "enabled": false
        },
        "env": {
            "ASPNETCORE_ENVIRONMENT": "Development"
        },
        "sourceFileMap": {
            "/Views": "${workspaceFolder}/Views"
        }
    },
    {
        "type": "chrome",
        "request": "launch",
        "name": "Chrome",
        "url": "http://localhost:5000",
        "webRoot": "${workspaceRoot}/wwwroot"
    }
],
"compounds": [
    {
        "name": "Full stack",
        "configurations": [".NET Core Launch (full)", "Chrome"]
    }
]