How to prevent my VS Code Breakpoints from moving after starting debug session?

Question

I'm having an issue where after I start a debugging session in VS Code for Node.js, my breakpoints move to completely different lines than where I had them set.

Before:

After:

As you can see, the breakpoints moved from lines 15 & 18 to lines 6 & 10.

I figured this might be due to an issue with my source map or something (since I'm using TypeScript), but I used source-map-visualization to verify my source map and everything looks to be in order.

I also figured this might be something to do with the VS Code runner, so I tried to run node --inspect-brk node_modules/.bin/jest --runInBand in my Terminal, and attach it to the process within VS Code. But the problem persisted.

I'm using Jest to run my tests.

If I only set breakpoints within the Jest test itself, it seems to have the same issue. However, if I set breakpoints within my source files and Jest tests, the Jest test breakpoints do not seem to move.

I have read the Jest troubleshooting page for Debugging in VS Code and followed the steps correctly (ensuring I'm using runInBand, etc).

I also tried to add the outFiles option to my VS Code launch.json file to point to all the files in my dist folder, but that had the side effect of modifying my test files, and the issue persisted regardless, so that did not help.

I also tried setting smartStep to true within my launch.json file, but that made no difference.

You can find the code I'm working with on the debuggingBreakpointFix branch of dynamoose. A simple npm install followed by setting some breakpoints and running the Debug Jest Tests in VS Code should be enough to reproduce the issue.

Answer 1

I also ran into this same issue and got stuck with this for a couple of hours.

OP had also posted this question on GitHub and received a working answer there:

This is because Babel is transforming the script and rewriting its sourcemaps, whereas we already see the compiled file on disk and set sourcemaps from that, both files (the virtual transformed version, and the one on disk) existing at the same path. Therefore we set breakpoints at all the candidate positions, which results in the behavior you see.

I would recommend adjusting your test setup. This is the recommended way to use TypeScript with Jest, which works without any extra configuration: https://jestjs.io/docs/getting-started#using-typescript

Alternately, to avoid transforming the already-compiled code and fix this issue, you can add this to your jest.config.js:

    "transformIgnorePatterns": ["/dist/.+\\.js"]

In case changing modifying the jest setup is not an option, this should suffice! (Which is the case I ran into, as I'm working on a feature for OSS project that have testing infrastructure in place and am not looking to overhaul that)