vs code: debug typescript running in nodejs, while specifying source root

Question

I would like to debug my typescript code (which runs in NodeJS) with VSCode. The following code is my starting point and works just fine.

Typescript code:

//src/index.ts
console.log('line 1');
console.log('line 2');

The compiler settings:

//tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "sourceMap": true
    },
    "exclude": [
        "node_modules"
    ]
}

And the launch configuration

//.vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/index.js"
        }
    ]
}

In the above setup, I can add breakpoints in the typescript code and then start debugging.

All typescript source code is in a directory called src/. I would like to specify this in the compiler settings by adding the following config option:

"compilerOptions": {
    //...
    "sourceRoot": "src"

It still compiles just fine and when executed, it prints "line 1", "line 2".

However, the breakpoints no longer work. I looked at the generated sourcemaps and they specify a path "sourceRoot":"src". I guess that this breaks the sourcemap lookup. Since the original sources are in the same folder as the generated output. How do I configure this correctly in the compiler?

lagerone · Accepted Answer · 2020-02-27 12:21:21Z

2

The easiest way I have found to debug ts in vscode is to use ts-node

Then I use ts-node in my launch script as so

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ts node inspector",
      "type": "node",
      "request": "launch",
      "args": ["${workspaceRoot}/src/server.ts"],
      "runtimeArgs": ["-r", "ts-node/register"],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "internalConsoleOptions": "openOnSessionStart",
      "env": {
        "TS_NODE_IGNORE": "false"
      }
    }
  ]
}

answered Feb 27, 2020 at 12:21

lagerone

1,78714 silver badges13 bronze badges

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

1 Comment

lhk Over a year ago

nice, I didn't even know about ts-node.

lhk · Accepted Answer · 2020-02-27 14:34:12Z

2

The documentation explains that sourceRoot:

Specifies the location where debugger should locate TypeScript files instead of source locations. Use this flag if the sources will be located at run-time in a different location than that at design-time. The location specified will be embedded in the sourceMap to direct the debugger where the source files will be located.

So I have been using it incorrectly.

answered Feb 27, 2020 at 14:34

lhk

30.7k36 gold badges138 silver badges222 bronze badges

1 Comment

ru4ert Over a year ago

Oh wow, thank you. Sitting here for hours at the same problem. I had my index.ts in the src of the root. After I read your doc I putted the index in the root and kept additional src code in the src dir.

Collectives™ on Stack Overflow

vs code: debug typescript running in nodejs, while specifying source root

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related