Debugging external typescript dependencies setting breakpoints within source files

[denik1981]

I'm working on a side project which among a few things it uses an external dependency that I need to debug.

I have cloned the library from its original repo and rebuilt it with source maps support. Then I have npm link this module and installed (link) as a dependency in the main project. And then I started placing some breakpoints in its source files but seems all of them are dismissed. The library is bundled into a single file. I'm able to parse well the generated source map with the source-map Mozilla parser and it looks good to me as well. I imagine this isn't an uncommon use case for debugging TS.

I have tried with a few settings in launch.json. I'm running my debugging session using "Attached mode", I have set the sourceMaps to true and resolveSourceMapLocations to the location of the generated bundled file of this module. As a side note to be sure the breakpoint should be hit, I have tested placing a debugger statement in the source files and rebuilt them which ends up pausing the execution as it is expected.

BTW, I have tried with the standard js debugger and the nighly extension as well. I'm currently using "nightly".

Wherever I read about debugging typescript projects is with the opposite use case on where you start the debugger by running the the initial ts file and you help vscode know where are the generated files with the outFile setting. In this case, as this is a dependency, I'm importing a js file, not ts. How can I instruct vscode to find and use the source files from the bundled generate files and the generated source map?

[connor4312]

outFiles is generally the right thing to set. Please collect a log file using the instructions in the "bug" issue template

[denik1981]

launch.json

{
  "configurations": [
    {
      "name": "Attach",
      "port": 9229,
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "type": "pwa-node",
      "sourceMaps": true,
      "resolveSourceMapLocations": [
        "${workspaceFolder}/node_modules/msw/node/lib/"
      ],
      "trace":true
    }
  ]
}

vscode-debugadapter-fe512a56.json.gz

[denik1981]

My source map file is generated in ${workspaceFolder}/node_modules/msw/node/lib/index.js.map. All of the breakpoints I placed in my source files are dismissed. I can only break on the generated files.

[connor4312]

Note that resolveSourceMapLocations is a glob pattern, so the one you have will only match a file named lib. You'd probably want "${workspaceFolder}/node_modules/msw/node/lib/**/*.js".

Also, the file path is linked, so the path is actually /home/demian/code/play/msw/msw/node/lib/index.js, not in your node_modules. You'll want to set resolveSourceMapLocations or outFiles to include that directory.

[denik1981]

I think this issue is in particular with the msw library. The source map is generated but for some reason, it is not enough information for vscode to link the source files. Yes, I have tried using absolute paths as well to prevent the symlinks and the outDir setting as well but I was not able to step into my ts breakpoints. I will keep investigating and comment here if I found something new. If there is anyone else having similar issues when trying o hook into source ts code from dependencies please make a comment.

[denik1981]

I will close this issue as I think is no longer relevant.