CODEWITHSUNDEEP
node.jstypescriptvisual-studio-codevscode-debuggersource-maps
Christoph
Christoph

Reputation: 762

VS Code: Debug TS code when stepping into a library function in the node.js debugger

I have written a library in TS and a program to test my library. I have enabled source Maps for both the library and the program and I am using the node.js debugger.

Debugging the TS code of my program works, but as soon as I step into a call of a library function, I am debugging the emitted JS code instead of my TS source.

I set the 'files' field of my library's package.json to [ "lib" ], where lib is the dir which contains the JS files as well as the source map, but that didn't change anything.

I there another way how to tell VS Code that it should use the source map of my library?

Upvotes: 4

Views: 2147

Answers (1)

Christoph
Christoph

Reputation: 762

I finally found a solution. The problem is – of course – that the VS Code debug adapter can't find the source files of the lib. The key to resolve that issue is the "sourceRoot" option in the lib project's tsconfig.json.

Consider a lib project in dir myLib and another project in dir myProg that imports functions from myLib. The lib's source files are in myLib/src and the transpiled js files as well as the source maps are in myLib/dist. myLib and myProg reside in the same parent dir.

Now when I debug myProg, I want to be able to step into a call of a function imported from myLib and debug its TS source.

Regarding the paths to the source files stored in the lib's source maps, it is important to know that relative paths are resolved relative to the source map.

Let's take a look at the "sources" array in one of the lib's source maps:

"sources":["../src/main.ts"]

Since we are running myProg, this path gets myProg/src/main.ts, but that's not the path to the lib's main.ts.

Now, we add "sourceRoot": "../../myLib/src/" to the lib's tsconfig.json. We see that the relevant part of the source map has changed to

"sourceRoot":"../../myLib/src/","sources":["main.ts"]

Since this path is resolved relative to myProg/dist, it gets myLib/src/main.ts.

Now, we merely have to tell VS Code to look for source maps in myLib/dist too, which results in the following value for "outFiles" in myProg's launch.json:

"outFiles": [
    "${workspaceFolder}/dist/*.js",
    "${workspaceFolder}/../myLib/dist/*.js"
]

That's it. You may even set breakpoints in myLib's .ts files. They will be hit, but I observed that they were hit in the wrong order. In that case, set a breakpoint in myProg somewhere before the first invocation of an import from myLib. I didn't do extensive tests, but from what I observed, that seems to solve this issue.

If you experience the same like me, namely that you hit F5 and the program just runs without hitting any breakpoint, just hit F5 again and again until it works. I tested with the @builtin @id:ms-vscode.js-debug as well with @id:ms-vscode.js-debug-nightly, each with "type": "node" and "type": "pwa-node", but that didn't change anything. It seems to take less launches to work in case you open the entry point file and have a break point in it before launching, but I didn't test this extensively too, so it could just have happened by chance.

Upvotes: 7

Related Questions