Cannot put breakpoint on async/await in Chrome devtools

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

I open a snippet in chrome devtools source tab, and put above code in it. But I can't put any breakpoint to this. Breakpoints can be added only when there is no async/await functions in code.

What's more, I have never succeed debugging any async/await code in chrome devtools. Sometimes breakpoints added moved to wrong places, sometimes code pause at places with no breakpoints.

Is it a bug of chrome?

async-await devtools google-chrome javascript
1 Answers

There are multiple things to conside,

If you have Minified code, make sure your source map is added right to help debug better.

If you are writing snippet as js code in chrome developer tool, while debugging it will take you to run time VM, make sure you are at right VM while debugging the code, as for asyn debugging it create VM which open at side to your main code snipped. check the reference image screenshot

You can also make use if debugger; statement to rightly point your line, if still have difficulties.

user_20566690
Related