Network Tab

Detailed Explanation

Network Tab is a panel inside your browser's DevTools that shows every HTTP Request your Web Application makes. Think of it as an X-ray of the conversation between your Frontend and server.

To use it:

1. Open DevTools (press F12)
2. Click the "Network" tab
3. Reproduce the action you want to debug (navigate to a page, submit a form)
4. Watch requests appear in the list

Each request shows key information:

• Name: The URL being called (e.g., supabase.com/rest/v1/posts)
• Status Code: Whether it succeeded (200) or failed (400, 401, 403, 500)
• Type: The kind of request (fetch, xhr, document)
• Time: How long it took
• Size: How much data was transferred

Click on any request to see details: the Payload you sent, the JSON response you received, and the request headers (including your auth token).

The Network Tab is essential for Debugging loaders and actions. When a loader returns empty data, the Network Tab shows whether Supabase returned an empty array (likely a RLS issue) or an error. When a form submission fails silently, the Network Tab reveals the Status Code and error message from the Server.

Click any request to inspect the full HTTP Response body, headers, and timing. This reveals Permission issues, CORS errors, and helps trace data through Client-Side and server-side code.