How to debug Typescript code in Visual Studio Code with ts-node-dev and correct line numbers

Question

I have a Typescript project that is launched as follows:

ts-node-dev  --preserve-symlinks --inspect=0.0.0.0  -- src/server.ts

I can debug it with Visual Studio Code, but the debugger breaks at the wrong lines. The only reasonable explanation I can think of, is that ts-node-dev does not point the debugger to the source maps (which are there).

How can I correctly debug Typescript code executed by ts-node-dev?

Answer 1

Configuration for debugging in vs code with ts-node-dev to attach and launch debugger:

package.json:

{
  "scripts": {
    "dev:debug": "ts-node-dev --transpile-only --respawn --inspect=4321 --project tsconfig.dev.json src/server.ts",
    "dev": "ts-node-dev --transpile-only --respawn --project tsconfig.dev.json src/server.ts",
  }
}

launch.json:

{
  "version": "0.1.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to dev:debug",
      "protocol": "inspector",
      "port": 4321,
      "restart": true,
      "cwd": "${workspaceRoot}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Debug",
      "protocol": "inspector",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "dev"]
    }
  ]
}