在 vscode 中使用 Angular 4 调试 Asp.Net Core 应用程序

Question

我是 Angular 4 的新手，但我已经配置了一个项目来使用 Angular 4 和 Asp.Net Core 2.0。 我的问题是，当我在 Visual Studio 代码中按 F5 时，我可以调试我的 C# 文件，但不能调试我的打字稿代码。

网络高手是怎么做到的？有什么不同的工作方式，或者 .vscode 文件夹中的 launch.json 和 tasks.json 的其他设置？

这里是项目地址：https://github.com/otaviolarrosa/VirtualStore

我的 launch.json 文件：

{
"version": "0.2.0",
"configurations": [
    {
        "name": ".NET Core Launch (web)",
        "type": "coreclr",
        "request": "launch",
        "preLaunchTask": "build",
        "program": "${workspaceRoot}/VirtualStore/bin/Debug/netcoreapp2.0/VirtualStore.dll",
        "args": [],
        "cwd": "${workspaceRoot}/VirtualStore",
        "stopAtEntry": false,
        "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": "${workspaceRoot}/Views"
        }
    },
    {
        "name": ".NET Core Attach",
        "type": "coreclr",
        "request": "attach",
        "processId": "${command:pickProcess}"
    }
]}

还有我的 tasks.json 文件：

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
    {
        "taskName": "build",
        "command": "dotnet build",
        "type": "shell",
        "group": "build",
        "presentation": {
            "reveal": "silent"
        },
        "problemMatcher": "$msCompile"
    }
]}

Answer 1

调试 Angular4 应用程序的最佳方式是在运行该应用程序的浏览器中。在开发模式下，Angular4 创建源映射文件。在例如Chrome 你可以浏览看起来类似于 Angular 应用程序路径的源图。您也可以在此处设置断点。

一个非常酷的 Angular 2+ 应用程序调试工具是 Augury

所以在 VSCODE 中调试你的 C#，在 Chrome 中调试你的 Angular 应用程序