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

Answer 1

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