小编Mar*_*ten的帖子

我目前正在尝试调试我打包的 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 加载器的选项对象中的某个位置，但是如何在不删除旧设置的情况下将它们包含在那里？我的当前 …