Breakpoints do not stay on their line in debugger both in Chrome and VS Code

Question

I am stuck trying to figure out why my debuggers do not place the breakpoints on their appropriate lines.

As you can see in the graphics below, the breakpoints do not work as expected:

Misbehaving breakpoints in Chrome

For VS code this is the script I am running:

"test-script": "env-cmd -f./config/dev.env nodemon --inspect-brk --exec 'babel-node./tests/$TEST_SCRIPT'"

Disappearing breakpoints in VS Code

I'm not sure if this is a babel/webpack misconfig or something set wrong in the debuggers.

• In .babelrc I have tried setting sourceMaps to true , "both" , and "inline" but that doesn't fix things.
• In my webpack config I have devtool = source-map and mode = development .

I would really prefer not to put console.log statements everywhere and use the debugger as it was intended so any help would be greatly appreciated.

Thanks!

Answer 1

That looks like what happens when you're transpiling async functions for target environments that don't have them. They end up being so thoroughly transformed so that regeneratorRuntime can handle them that even source maps can't help. I solve it by setting up the project not to transpile async functions during dev and debugging on a modern browser that supports them directly. Then we do testing on target pre- async browsers with the production (transpiled) build. If we have to track down a problem that only happens when transpiling (very rare), we turn it back on for dev and insert debugger; statements. :-|