How do I get VSCode to load source maps for NPM dependencies?

Question

I have a dependency that is written in TypeScript. The dependency includes source maps and original source in the NPM package. If I set a breakpoint in my code and then step into the dependency, it correctly steps into the TypeScript rather than the compiled JavaScript. However, if I set a breakpoint in the TypeScript code and then launch my app, VSCode says

Breakpoint ignored because generated code not found (source map problem?).

If I set a breakpoint after stepping into the dependency everything works.

I believe the problem here is that source maps are one-way, so when I have a breakpoint in a TypeScript source file, it doesn't know where that is in JavaScript (which is required to actually set the breakpoint via node debugger). Once the JavaScript file is open, VSCode is able to match the two up and now breakpoints work.

So the question is, how can I make it so that my TS breakpoints work from startup, without having to first step into the file? The dependency is many files and having to reset my breakpoints every run is problematic, especially since the particular issue I am debugging runs into socket connection timeouts if I take too long (more than a couple seconds).

What I want is a way to tell TypeScript, "parse these JavaScript files when the debugger is launched and sync up the source maps so breakpoints match up correctly".

I know that the general functionality is available because I can successfully debug the dependency itself (I am the maintainer of the dependency) via breakpoints in TypeScript files. It just seems that some information is lost when it is loaded as an NPM module.

Hamza

I think the confusion is caused by the package distributing the source code. In the typical case, it should not. And if you think about it, when you try to debug the code, it means you are running the code. By running the code it means that you are running the JavaScript code instead of the TypeScript source code (hence you need the source map). By placing the breakpoint in the source code probably won't work as it is not executed. When you are executing (in Debug mode), the "Source code" you are looking at is connected with the source map, thus it works. – Equalize

I do agree that this is not convenient, and maybe VSCode can do something about it. Do you have better experience in other IDE for this issue? – Equalize

Debugging transpiled source code, especially if the original source used promises and was transpiled to ES5, can be absolute hell. It is about as effective as debugging assembly instructions when you wrote your code in C/C++. In most languages, the distributed binary is compiled but debugging tools often (always?) support distributing source code along with the binary to make it so debugging is sane. This is true for C# and Java, and with some work C/C++. I suspect it is the same for Go and Rust as well? – Hamza

Answer 1

This is exactly what the outFiles attribute in the launch.json file is for - set it to a glob pattern that includes the javascript files in the node module (and your own code). The debug adapter will look at those files for sourcemap references, so it can resolve breakpoints in the TS files immediately.

Examples:

"outFiles": [ "${workspaceRoot}/myOutFiles/**/*.js", "${workspaceRoot}/node_modules/**/*.js" ]

If you know of just a select set of node modules that include sourcemaps, you can improve performance like this:

"outFiles": [ "${workspaceRoot}/node_modules/{module_a,module_b}/**/*.js" ]

From this issue: https://github.com/Microsoft/vscode-node-debug/issues/82#issuecomment-290642560

Rhinarium

This worked. Would you mind updating the answer to include the details rather than just linking out, so it is retained in Stack Overflow (per the rules)? In particular, the instructions around how to include node_modules in outFiles in the launch.json would be valuable to future readers. Mostly just copy/paste from the GitHub issue. :) Drop a comment here when you have edited and I'll accept answer. – Hamza