javascript - 无法在 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 中的任何 async/await 代码。有时添加的断点会移动到错误的位置，有时代码会在没有断点的地方暂停。

是不是chrome的bug？

标签： javascriptgoogle-chromeasync-awaitdevtools

Answer 1

有很多事情需要考虑，

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

如果您在 chrome 开发人员工具中将代码片段编写为 js 代码，在调试时它将带您运行时虚拟机，请确保在调试代码时位于正确的虚拟机上，至于异步调试它会创建在您的主服务器旁边打开的虚拟机代码被剪断。检查参考图像 截图

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