Visual Studio Code Chrome Debugger doesn't set breakpoints inside generator function in React - reactjs

Question

I am using the latest Visual Studio Code and Chrome debugger extension and my code is React SPA.
When I am trying to set breakpoints inside generator functions
(i.e. function* ), the breakpoint is moved to the top of the function and I can’t stop when I want.
Step Over also doesn’t work, but move me to some low level library.
For normal functions breakpoints are working correctly.
Am I missing something? Is it a known limitation or a bug? Is any tools( e.g. Edge/Firefox or native Chrome debugger) that allow debugging of generator functions better?

Answer 1

I'm currently seeing the same thing and am looking to find a solution. This is what I've found so far and might be of some help.
In our case, we use babel to transpile our code, and looking at the code produced by babel we could see that generators were being transpiled for the browsers targeted by browerslist read by #babel/preset-env. So as an initial test, we removed #babel/preset-env from our dev build and tested locally in Chrome 70. Generators were no longer being transpiled, and we could successfully set breakpoints in VSCode.
So for us the solution was to not transpile for dev builds, and to transpile for our targeted browsers for production builds.
For reference, here is the babel config we used to test this solution:
module.exports = {
presets: [
'#babel/preset-react'
],
plugins: [
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
'#babel/plugin-proposal-class-properties',
'#babel/plugin-transform-modules-commonjs'
],
env: {
production: {
presets: [
[
'#babel/preset-env',
{
debug: false,
useBuiltIns: 'usage'
}
]
],
plugins: [
'#babel/plugin-transform-runtime'
]
}
}
}
We can set BABEL_ENV=production in any production npm scripts where we want to target our supported browsers.
{
"name": "testapp-ui",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "rm -rf dist && mkdir dist && NODE_ENV=production BABEL_ENV=production npm run build:webpack",
"build:dev": "rm -rf dist && mkdir dist && NODE_ENV=development npm run build:webpack",
"build:webpack": "webpack --progress --debug",
...

Answer 2

Thanks to Bernard Leech's answer , I’ve updated the .babelrc configuration file ( one of possible formats as described in https://babeljs.io/docs/en/configuration).
And it allowed to set breakpoints in dev environment.
The changed lines in .babelrc are commented out:
{
"presets": [
//[
// "es2015",
// {
// "modules": false
// }
//],
"react",
"stage-0"
],
"env": {
"test": {
"presets": ["react"]
"prod": {
"presets": [["es2015"], "react"]
}
}
}
To use different configurations for dev and prod you should set e.g.
BABEL_ENV=prod and have different sections in “env” element ( from
How do you configure babel to run with different configurations in different environments )
Related links:
How to debug ES6 NodeJS with VSCode
Debugging with babel-register + NodeJs does not work #5728