How to debug asynchronous JavaScript with DevTools

Async Code Breaks Normal Debugging

Breakpoints work synchronously. When you step through async code, execution appears to jump unpredictably. Understanding how DevTools handles async context prevents confusion and enables effective debugging of Promises and async/await.

Async Stack Traces

In Chrome DevTools, enable async stack traces in Settings then Experiments. With async traces on, the call stack panel shows not just the current synchronous stack but the async frames that initiated the current operation -- giving you a complete picture of what triggered the code.

async function fetchUser(id) {
  const resp = await fetch('/api/users/' + id); // set breakpoint here
  const data = await resp.json();
  return data;
}

// With async stack traces enabled, the call stack shows:
// fetchUser (async)
// async gap
// handleButtonClick (the function that called fetchUser)
// async gap
// EventListener: click

Debugging Promises Without async/await

For Promise chains, the easiest approach is to convert them temporarily to async/await for debugging -- the logic is identical but breakpoints behave predictably. Alternatively, place breakpoints inside .then() callbacks directly. For event listener bugs, the DevTools Sources panel has an Event Listener Breakpoints section that pauses on specific DOM events.