Debugging with Console & DevTools

Which DevTools feature would help debug network issues with this function?

function apiRequest(endpoint, data) {
  return fetch(`https://api.example.com/${endpoint}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  })
  .then(response => response.json());
}

DOM breakpoints
Network request blocking
XHR/fetch breakpoints
XHR/fetch breakpoints provide specialized API debugging: 1) They pause execution when network requests matching certain patterns are made, 2) You can set breakpoints for all requests or only those matching specific URLs, 3) The debugger pauses right before the request is sent, allowing inspection of request parameters, 4) This helps verify that the correct endpoint, headers, and body are being used, 5) You can modify the request before it's sent to test different scenarios, 6) Combined with the Network panel, this gives complete visibility into the request lifecycle, 7) This type of breakpoint works with both the older XMLHttpRequest and modern fetch API, 8) This targeted approach is much more efficient than setting regular breakpoints, especially when the network call is made deep in a call chain.
Performance monitoring

Next Question (35/40)