使用 Asp.Net Core 3.1 在 VSCode 中调试 TypeScript

Question

我正在尝试这个question 的方法，但它只有在我在打字稿代码中使用“调试器”命令时才有效，而不是断点。

这是我的 lauch.json 文件：

{
    "version": "0.2.0",
    "compounds": [
        {
            "name": "ASP.Net Core & Browser",
            "configurations": [
                ".NET Core Launch (web)",
                "Launch Chrome"
            ]
        }
    ],
    "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/netcoreapp3.1/MyApp.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        },
        {
            "name": "Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "https://localhost:5001",
            "webRoot": "${workspaceRoot}/wwwroot"
        }
    ]
}

更新 tsconfig.json

{
  "compileOnSave": false,
  "preserveWhitespaces": "off",
  "compilerOptions": {
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "module": "esnext"
  }
}

解决方案，在 tHeSiD 回答后：

lauch.json

{
    "version": "0.2.0",
    "compounds": [
        {
            "name": "ASP.Net Core & Browser",
            "configurations": [
                ".NET Core Launch (web)",
                "Launch Chrome"
            ]
        }
    ],
    "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/netcoreapp3.1/MyApp.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            "sourceMaps": true,
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            },
        },
        {
            "name": "Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:5000",
            "webRoot": "${workspaceRoot}/wwwroot",
            "sourceMaps": true
        }
    ]
}

tsconfig.json

{
  "compileOnSave": false,
  "preserveWhitespaces": "off",
  "compilerOptions": {
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "inlineSourceMap": true,
    "inlineSources": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "module": "esnext"
  }
}

Answer 1

要让 VSCode 在您的应用程序中捕获断点，您需要使用内联源映射或设置正确的源映射路径。

对我来说最好的设置是

//TSCONFIG SETTINGS
"inlineSourceMap": true /* Emit a single file with source maps instead of having a separate file. */,
"inlineSources": true /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */,

如果您想使用"inlineSourceMap": true NOT FROM LAUNCH.JSON，则需要在您的tsconfig 中删除"sourceMap": true,！

//LAUNCH.JSON Settings
"sourceMaps": true,
"outFiles": ["${workspaceFolder}/dist/**/*.js"], // you need to set this according to your project config

这修复了大多数与 VSCode 调试 TS 文件所依赖的源映射相关的问题。