Search code examples
typescriptvisual-studio-codesource-mapstypescript2.0node-debugger

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


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.


Solution

  • 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