Javascript 在Chrome和VS代码中,断点不会停留在调试器中的行上

Javascript 在Chrome和VS代码中,断点不会停留在调试器中的行上,javascript,debugging,visual-studio-code,google-chrome-devtools,babeljs,Javascript,Debugging,Visual Studio Code,Google Chrome Devtools,Babeljs,我一直在试图弄明白为什么我的调试器没有将断点放在相应的行上 如下图所示,断点无法按预期工作: 对于VS代码,这是我正在运行的脚本: “测试脚本”:“env cmd-f./config/dev.env nodemon--inspect brk--exec'babel node./tests/$test_script'” 我不确定这是babel/webpack配置错误还是调试器设置错误 在.babelrc中,我尝试将sourceMaps设置为true,“两者”, 和“内联”,但这并不能解决

我一直在试图弄明白为什么我的调试器没有将断点放在相应的行上

如下图所示,断点无法按预期工作:


对于VS代码,这是我正在运行的脚本:

“测试脚本”:“env cmd-f./config/dev.env nodemon--inspect brk--exec'babel node./tests/$test_script'”


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

  • .babelrc
    中,我尝试将
    sourceMaps
    设置为
    true
    “两者”
    , 和
    “内联”
    ,但这并不能解决问题
  • 在我的网页配置中 拥有
    devtool
    =
    源代码映射
    模式
    =
    开发
我真的不希望把
console.log
语句放在任何地方,并按照预期使用调试器,因此非常感谢您的帮助


谢谢

对于没有异步函数的目标环境,当您传输
异步函数时会发生这种情况。它们最终被彻底改造,以至于连源地图都无法帮助regeneratorRuntime处理它们。我通过将项目设置为在开发和调试过程中不传输
async
函数来解决这个问题,在一个直接支持这些函数的现代浏览器上进行调试。然后,我们在具有生产(transpiled)构建的目标pre-
async
浏览器上进行测试。如果我们必须跟踪一个只有在传输时才会发生的问题(非常罕见),那么我们可以为dev重新打开它并插入
调试器语句:-|

我不知道这是否是同一件事,但在其他语言中,当断点不在它的实际位置时,意味着编译后添加或删除了一些代码。这有什么意义吗?谢谢TJ,我以为我想弄明白这件事会发疯的。这里提供的链接问题的一个答案提到使用默认环境设置。如果您将env字符串更改为chrome>60(或者,有趣的是,事实上,更改为>4%!),代码将按原样传递,因为chrome>60本机支持异步/等待和箭头函数。在两个调试器中为我修复了它。在开发过程中,有没有办法在不禁用异步函数传输的情况下解决这个问题?我的意思是肯定这是一个好方法,但这可能会导致错误在未被注意的情况下溜走。也许更新版本的babel在源代码映射任务方面会做得更好?@sktguha-将
async
函数代码有效地映射到生成的再生器运行时状态机代码似乎是一个非常困难的问题。我从来没见过它做得好。但我也从未(从字面上看)看到过这样一个问题,即使用regenerator runtime的生产传输代码有一个bug,而直接运行的等效
async
函数代码没有看到一个问题,即使用再生器运行时传输的生产代码有一个bug,而直接运行的等效异步函数代码没有。如果没有错误发生,那么是的,为了更好的DX,那么答案是好的,是的。@sktguha-不能说它从未发生在其他人身上。:-)只是不适合我。