CODEWITHSUNDEEP
node.jstypescriptdebuggingvisual-studio-code
lhk
lhk

Reputation: 30056

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

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?

Upvotes: 1

Views: 826

Answers (2)

lhk
lhk

Reputation: 30056

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.

Upvotes: 1

lagerone
lagerone

Reputation: 1767

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

Upvotes: 1

Related Questions