CODEWITHSUNDEEP
node.jstypescriptvisual-studio-codesource-maps
303
303

Reputation: 1108

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

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?

Upvotes: 25

Views: 14705

Answers (4)

Josh M.
Josh M.

Reputation: 27773

I suggest you just cancel everything related to running via node or ts-node, uninstall ts-node completely and just use tsx:

npm i -D tsx

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug",
      "console": "integratedTerminal",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/tsx",
      "program": "${workspaceFolder}/path/to/entry.ts"
    }
  ]
}

I was messing with ts-node and such for too long. Swapping it out for tsx and it "just worked" for me.

Upvotes: 3

Tushar
Tushar

Reputation: 169

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.

Upvotes: 3

HDM91
HDM91

Reputation: 1396

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

Upvotes: 15

Dave
Dave

Reputation: 2308

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

Upvotes: 7

Related Questions