Debugging with Console & DevTools

Which DevTools feature is most helpful for debugging this asynchronous function?

function getUserData() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(data => processUserData(data))
    .catch(error => console.error('Failed to get user data', error));
}

DOM breakpoints
Async call stack
Async call stack preservation is essential for async debugging: 1) It maintains the call stack context across asynchronous operations, 2) Without this feature, the stack would only show the current async callback, not what triggered it, 3) With async stack traces enabled, you can see the complete chain of calls, including the original caller of getUserData(), 4) This helps understand how execution flowed through various promises and callbacks, 5) When an error occurs in the promise chain, the full async stack shows what initiated the operation, 6) This feature works with promises, async/await, setTimeout, and other async mechanisms, 7) It's enabled via the 'Async' checkbox in the call stack panel or DevTools settings, 8) This capability is invaluable for debugging complex asynchronous code flows that would otherwise be difficult to track.
CSS inspector
Memory snapshots

Next Question (25/40)