🐛 Debugging

Network Debugging

Project Evidence Required

Examine Network tab for API calls, CORS errors, response status.

Assessment Method

Demo: Inspect fetch requests, response data, error messages

What it is

The Network panel in DevTools shows every HTTP request your page makes — URL, method, status, request headers, response headers, request body, response body, and timing. You can replay requests, copy them as curl, and filter by type.

Why it matters

API issues are usually invisible from the JavaScript side. A fetch might fail silently from a CORS preflight, or return a 400 because of a content-type mismatch. The Network tab shows the actual exchange so you can see what’s wrong.

How GateGame implements it

When the leaderboard fetch started failing, the Network tab revealed a CORS error: the response was missing Access-Control-Allow-Origin. Fixed on the backend. Another time a 400 turned out to be because the request was sent with text/plain instead of application/json. Both bugs were diagnosed entirely from the Network tab.

Code Example

// The fetch under inspection in the Network tab:
const response = await fetch('/api/leaderboard', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },  // ← critical
  body: JSON.stringify({ score, player })
});
// Network tab showed: 400 Bad Request, CORS blocked, etc.

Key Takeaway

When fetches fail, the Network tab tells you the real story. Status code, headers, payload — all visible side-by-side.