Debugging TypeScript in VS Code steps into JavaScript instead

Question

I'm trying to debug my typescript NodeJs application in VS Code with the following launch.json:

   {
   "version": "0.2.0",
      "configurations": [
         {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/apps/file-server-app/app.ts",
            "outFiles": [
                "${workspaceFolder}/build/**/*.js"
            ],            
            "runtimeArgs": [
                "--require", 
                "ts-node/register"
            ]
        }
      ]
   }

The application starts fine and everything works as it should except the breakpoints. Instead of stopping on the actual line I placed the breakpoint in the Typescript code, it breaks on the line in the compiled Javascript equivalent.

Things I've tried:

Enabling the source maps and making sure they are generated correctly
Enabling the in line source maps and making sure they are generated correctly
Reinstalling everything on a new setup

Additional information:

VSCode Version: 1.46.1
TypeScript Version: 3.8.3

Simon Corcos · Accepted Answer · 2020-11-05 20:55:15Z

7

Turns out this is intended in the design of VS Code.

To fix it, you can either:

Set outFiles in your launch.json to an empty array so that sourcemaps are not discovered and the path redirection doesn't happen.
or drop ts-node and debug compiled files, or use ts-node without manually compiling them.

See this github issue for more details: https://github.com/microsoft/vscode/issues/101927

answered Nov 5, 2020 at 20:55

Simon Corcos

1,02215 silver badges33 bronze badges

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

1 Comment

Shrike Over a year ago

this is the correct answer

Simon Corcos · Accepted Answer · 2020-07-08 17:32:06Z

2

Apparently, enabling the allowjs setting in the tsconfig.json and compiling the typescript with that makes the VS Code debugger step into the Javascript files instead of the Typescript files. For now, even if it means you can't error check your javascript files while compiling the typescript, the workaround is to disable the allowjs setting by setting it to false like this:

"compilerOptions": {
    //"allowJs": true
}

edited Jul 8, 2020 at 17:32

Simon Corcos

1,02215 silver badges33 bronze badges

answered Jul 8, 2020 at 0:37

Le Woogush

3853 silver badges16 bronze badges

1 Comment

Simon Corcos Over a year ago

This behaviour does not happen in Webstorm by the way.

Collectives™ on Stack Overflow

Debugging TypeScript in VS Code steps into JavaScript instead

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related