Visual Studio Code Chrome Debugger不在React中的生成器函数内设置断点

Question

我使用的是最新的Visual Studio Code和Chrome调试器扩展，我的代码是React SPA。 当我试图在generator functions（即函数*）中设置断点时，断点将移动到函数的顶部，我无法在需要时停止。

Step Over也不起作用，但是让我转到一些低级库。

对于正常功能，断点正常工作。

我错过了什么吗？这是一个已知的限制还是一个错误？是否有任何工具（例如Edge / Firefox或本机Chrome调试器）可以更好地调试生成器功能？

Answer 1

我目前正在看同样的事情，我正在寻找解决方案。这是我到目前为止所发现的，可能会有所帮助。

在我们的例子中，我们使用babel来转换代码，并查看babel生成的代码，我们可以看到生成器正在被@babel/preset-env读取的浏览器列表所针对的浏览器进行转换。因此，作为初始测试，我们从开发构建中删除了@babel/preset-env，并在Chrome 70中进行了本地测试。不再编译生成器，我们可以在VSCode中成功设置断点。

因此，对于我们来说，解决方案是不针对开发构建进行转换，并针对生产构建的目标浏览器进行转换。

作为参考，这是我们用来测试这个解决方案的babel配置：

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'
      ]
    }
  }
}

我们可以在我们想要定位支持的浏览器的任何生产npm脚本中设置BABEL_ENV=production。

{
  "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

感谢Bernard Leech's answer，我更新了.babelrc配置文件（https://babeljs.io/docs/en/configuration中描述的可能格式之一）。 它允许在开发环境中设置断点。

.babelrc中更改的行被注释掉：

{
    "presets": [
      //[
      // "es2015",
      // {
      //   "modules": false
      // }
      //],
      "react",
      "stage-0"
    ],
    "env": {
      "test": {
        "presets": ["react"]
       "prod": {
        "presets": [["es2015"], "react"]
      }
    }
  } 

要为dev和prod使用不同的配置，你应该设置例如BABEL_ENV = prod并在“env”元素中有不同的部分（来自How do you configure babel to run with different configurations in different environments）

相关链接： How to debug ES6 NodeJS with VSCode Debugging with babel-register + NodeJs does not work #5728