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

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",
    ...