在 Chrome 和 VS Code 中，断点不会留在调试器中

Question

我一直试图弄清楚为什么我的调试器没有将断点放在适当的行上。

正如您在下图中看到的那样，断点没有按预期工作：

Chrome 中的异常断点

对于 VS 代码，这是我正在运行的脚本：

"test-script": "env-cmd -f./config/dev.env nodemon --inspect-brk --exec 'babel-node./tests/$TEST_SCRIPT'"

VS Code 中消失的断点

我不确定这是 babel/webpack 错误配置还是调试器中设置的错误。

• 在.babelrc我尝试将sourceMaps设置为true 、 "both"和"inline" ，但这并不能解决问题。
• 在我的 webpack 配置中，我有devtool = source-map和mode = development 。

我真的不希望将console.log语句放在任何地方并按预期使用调试器，因此将不胜感激。

谢谢！

Answer 1

当您为没有它们的目标环境转换async函数时，这看起来会发生什么。 它们最终被彻底改造，以至于 regeneratorRuntime 可以处理它们，甚至源映射也无济于事。 我通过在直接支持它们的现代浏览器上设置项目而不是在开发和调试期间转换async函数来解决它。 然后我们使用生产（转译）构建在目标预async浏览器上进行测试。 如果我们必须追查仅在编译时发生的问题（非常罕见），我们将其重新打开以进行开发并插入debugger; 陈述。 :-|