Debugging TypeScript in VSCode with Asp.Net Core 3.1

Question

I'm trying the approach of this question but it works only if I use the "debugger" command in typescript code, but not with breakpoints.

Here is my lauch.json file:

{
    "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"
        }
    ]
}

update 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"
  }
}

Solution, after tHeSiD answer:

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

For VSCode to catch breakpoints in your app, you need to use inline source maps or set the correct sourcemap path.

For me the best settings have been

//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. */,

You need to remove "sourceMap": true, in your tsconfig if you want to use "inlineSourceMap": true NOT FROM LAUNCH.JSON!

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

This fixes most of the issues which are related to source maps on which VSCode relies on for Debugging TS Files.