时间戳

首页 > 解决方案 > Visual Studio Code Chrome 调试器不会在 React 的生成器函数中设置断点

reactjs - Visual Studio Code Chrome 调试器不会在 React 的生成器函数中设置断点

问题描述

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

Step Over 也不起作用，但将我移至一些低级库。

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

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

标签： reactjsvisual-studio-codevscode-debuggerchrome-debugging

解决方案

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

在我们的例子中，我们使用 babel 转译我们的代码，并且查看 babel 生成的代码，我们可以看到生成器正在为 browerslist read by 所针对的浏览器进行转译@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'
      ]
    }
  }
}

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

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

推荐阅读