无法在 Chrome devtools 中的 async/await 上放置断点

Question

{
  async function foo() {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, 500)
    })
  }
  
  async function bar() {
    await foo()
    console.info('foo done')
  }
  
  bar()
}

我在 chrome devtools 源选项卡中打开一个片段，并将上面的代码放入其中。但是我不能为此设置任何断点。只有在代码中没有 async/await 函数时才能添加断点。

更重要的是，我从未在 chrome devtools 中成功调试过任何异步/等待代码。有时添加的断点移动到错误的位置，有时代码在没有断点的地方暂停。

是chrome的bug吗？

Answer 1

有很多事情需要考虑，

如果您有缩小的代码，请确保正确添加源映射以帮助更好地调试。

如果您在 Chrome 开发工具中将代码片段编写为 js 代码，则在调试时它将带您运行时 VM，请确保在调试代码时位于正确的 VM，至于异步调试，它会创建在主程序一侧打开的 VM代码被剪断。检查参考图像 截图

您还可以使用 if 调试器；如果仍然有困难，请声明正确指出您的路线。