调试时，单步执行异步函数会导致断点跳转到函数声明行

Question

我目前正在尝试调试我打包的 Webpack 包。为了提高兼容性，我使用 babel 插件和 corejs 来使使用 async/await 函数成为可能。我还使用'eval-source-map'源映射在 DevTools 中调试我的代码。该问题出现在 Firefox 和 Chrome DevTools 中。

我想在异步函数中设置断点并想跳过它的行。我这样设置断点：

到目前为止，一切正常。我的断点被识别，并且我能够暂停代码的执行。现在我按下“Step over”来执行该DOM.getInput()函数并将其结果传递给变量。该函数是一个普通的同步函数。有时候是这样的：

按“Step over”后，断点跳转到函数声明行，当连续多次按“Step over”时，断点停留在函数声明行的前几个步骤中，然后突然结束了node_module文件。调用堆栈表明这些文件在某种程度上是从_asyncToGenerator. 我认为这与 Babel 异步函数的转换有关。

另外，当异步函数中发生错误时，callStack通常会变得混乱，请参见以下错误消息：

尽管我已经正确定义了源映射，但还是会发生这种情况。

因此，我开始谷歌搜索，看看是否有人有同样的问题并发现了这个 GitHub 问题。基本上，这个问题的OP和我有同样的问题。他写道：“实际行为 - 断点跳转到函数声明行”。有人评论说，对 Babel 使用以下配置可以解决该问题：

{
"env": {
"development": {
"sourceMaps": true,
"retainLines": true
}
},
"presets": [
"es2015"
]
}

我相信，只有这些设置是必要的：

"env": {
"development": {
"sourceMaps": true,
"retainLines": true
}

但是，我想在 Webpack 配置文件中配置 Babel 设置，而不是在.babelrc. 我可能应该将它们添加到 Babel 加载器的选项对象中的某个位置，但是如何在不删除旧设置的情况下将它们包含在那里？我的当前webpack.config.js看起来像这样：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  devtool: 'eval-source-map',
  mode: 'development',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },

  devServer: {
    client: {
      overlay: false,
    },

    static: {
      directory: path.join(__dirname, 'dist'),
    },

    port: 9000,
    hot: 'only',
  },

  module: {
      rules: [
            {
             test: /\.css$/i,
             use: ['style-loader', 'css-loader'],
            },
            {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
            },
            {
            test: /\.(woff|woff2|eot|ttf|otf)$/i,
            type: 'asset/resource',
            },
            {
            test: /\.(webm)$/i,
            type: 'asset/resource',
            },
            {
             test: /\.html$/i,
             loader: 'html-loader',
            },
            {
             test: /\.m?js$/,
             exclude: /(node_modules|bower_components)/,
             use: {
               loader: 'babel-loader',
               options: {
                 presets: [['@babel/preset-env', {useBuiltIns: 'usage', corejs: 3}]]
                }
            },
          },
      ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    })
  ],
};

但是，如果有人知道更好的尝试来解决这个问题，请告诉我，我很乐意尝试！