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

please post your tsconfig

tHeSiD
– tHeSiD

2020-06-19 11:16:51 +00:00
Commented Jun 19, 2020 at 11:16 — tHeSiD
– tHeSiD, Commented Jun 19, 2020 at 11:16
@tHeSiD, donne!

Beetlejuice
– Beetlejuice

2020-06-19 11:30:15 +00:00
Commented Jun 19, 2020 at 11:30 — Beetlejuice
– Beetlejuice, Commented Jun 19, 2020 at 11:30

tHeSiD · Accepted Answer · 2020-06-19 12:20:16Z

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.

answered Jun 19, 2020 at 12:20

tHeSiD

5,5214 gold badges38 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Beetlejuice Over a year ago

Changes in the lauch.json is made in what configurarion?

Beetlejuice Over a year ago

I'm receiving property outfiles is not allowed

tHeSiD Over a year ago

Oh i forgot it was the .net config, you can remove the out files entry and check

tHeSiD Over a year ago

Did you add "sourceMaps": true, to both your configs in launch.json?

Beetlejuice Over a year ago

This was the problem. Gotcha!

|

Collectives™ on Stack Overflow

Debugging TypeScript in VSCode with Asp.Net Core 3.1

update tsconfig.json

Solution, after tHeSiD answer:

lauch.json

tsconfig.json

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

update tsconfig.json

Solution, after tHeSiD answer:

lauch.json

tsconfig.json

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related