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

Answer 2

I had the same question, which brought me to this (old) post. I found the solution to my problem at https://gist.github.com/cecilemuller/2963155d0f249c1544289b78a1cdd695 so am posting it here in case anyone else finds themselves here!

This VS Code configuration allowed me to stop at breakpoints on the correct lines in my TypeScript code:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Example",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "node",
      "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"],

      "args": ["src/script.ts", "--example", "hello"],
      
      "cwd": "${workspaceRoot}",
      "internalConsoleOptions": "openOnSessionStart",
      "skipFiles": ["<node_internals>/**", "node_modules/**"]
    }
  ]
}

Answer 3

This is what worked for me. attach type debugger was not working for me but launch type is working fine. Breakpoints works as well even though sometimes it goes to the ts-node-dev source files and I guess we can't do anything about it.

It runs tsnd which is just the alias for ts-node-dev.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "name": "launch",
            "request": "launch",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/tsnd",
            "program": "${file}",
            "args": [
                "--transpile-only",
                "--respawn",
                "--project",
                "tsconfig.dev.json",
            ],
            "skipFiles": [
                "<node_internals>/**"
            ],
        },
}

"program" could be changed to run a specific file by replacing ${file} with that filename but with the above config, it will run the opened file with the debugger.