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

【问题标题】：Cannot put breakpoint on async/await in Chrome devtools无法在 Chrome devtools 中的 async/await 上放置断点
【发布时间】：2023-04-08 11:36:01
【问题描述】：

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

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

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

是不是chrome的bug？

【问题讨论】：

您可以使用debugger; 语句触发断点。

标签： javascript google-chrome async-await devtools

【解决方案1】：

有很多事情需要考虑，

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

如果你在 chrome 开发者工具中将 sn-p 编写为 js 代码，在调试时它将带你运行时 VM，在调试代码时确保你在正确的 VM 上，至于 asyn 调试它创建打开的 VM在您的主要代码旁边被剪断。检查参考图像 screenshot

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

【讨论】：