Chrome DevTools: Network Panel

Network panel menampilkan semua request yang dibuat browser — fetch API, gambar, CSS, JavaScript, WebSocket, dll. Ini adalah tool utama untuk debugging masalah API dan loading.

Membuka Network Panel

1. Buka DevTools (F12)
2. Klik tab Network
3. Refresh halaman — Network perlu aktif saat request terjadi

Memahami Tampilan

Setiap baris adalah satu request:

Name          | Status | Type   | Size  | Time
─────────────────────────────────────────────────
index.html    | 200    | doc    | 5.2kB | 45ms
style.css     | 200    | css    | 12kB  | 23ms
app.js        | 200    | js     | 89kB  | 120ms
/api/users    | 200    | fetch  | 2.1kB | 340ms
logo.png      | 200    | img    | 15kB  | 67ms
/api/auth     | 401    | fetch  | 0.1kB | 89ms  ← error!

Filter Request

Di toolbar atas:

• All — semua request
• Fetch/XHR — API calls (paling sering digunakan!)
• JS — file JavaScript
• CSS — file CSS
• Img — gambar
• Doc — dokumen HTML
• WS — WebSocket

Memeriksa Request Detail

Klik pada sebuah request untuk melihat detail:

Headers Tab

General:
  Request URL: https://api.example.com/users
  Request Method: GET
  Status Code: 200 OK

Request Headers:
  Authorization: Bearer eyJhbGci...
  Content-Type: application/json
  Accept: application/json

Response Headers:
  Content-Type: application/json
  Cache-Control: max-age=3600

Preview Tab

Menampilkan response dalam format yang mudah dibaca (JSON di-format rapi).

Response Tab

Response mentah (raw) dari server.

Timing Tab

Breakdown waktu request:

• DNS Lookup — resolusi domain
• Initial connection — TCP handshake
• SSL — TLS handshake
• Waiting (TTFB) — waktu tunggu server merespons
• Content Download — download response

Timing Waterfall Deep Dive

Klik request → tab Timing untuk melihat fase lengkap satu request. Setiap fase menunjukkan bottleneck yang berbeda:

Fase-fase itu secara urutan:

1. Queueing — request menunggu di antrian browser (batas koneksi paralel per origin, prioritisasi resource). Queue panjang = bundle request atau pakai HTTP/2.
2. Stalled — koneksi sudah siap tapi request belum dikirim (proxy negotiation, connection pool penuh).
3. DNS Lookup — resolusi api.example.com ke IP. Bisa di-skip kalau sudah di cache. Gunakan <link rel="dns-prefetch"> untuk domain kritis.
4. Initial Connection — TCP 3-way handshake. Lambat kalau server jauh (latensi tinggi). Solusi: CDN atau connection keep-alive.
5. SSL — TLS handshake (hanya HTTPS). Lambat di koneksi lambat atau sertifikat chain panjang. TLS 1.3 + session resumption mengurangi fase ini.
6. Request Sent — biasanya <1ms (upload header + body). Kalau besar (POST file) baru terasa.
7. Waiting (TTFB) — waktu tunggu server memproses. Paling sering jadi biang lambat — query DB, call ke service lain, cold start serverless.
8. Content Download — waktu download response body. Besar response / koneksi lambat = lama.

Rule of thumb: kalau TTFB > 500ms, masalah di server side (backend/DB). Kalau Download yang lama, optimasi size (compress, paginate) atau CDN lebih dekat.

Debugging API Calls

Workflow umum:

1. Buka Network → filter Fetch/XHR
2. Lakukan aksi yang trigger API call
3. Cek Status Code:
   • 200 — OK
   • 201 — Created
   • 400 — Bad Request (cek request body)
   • 401 — Unauthorized (cek token)
   • 403 — Forbidden (cek permission)
   • 404 — Not Found (cek URL)
   • 422 — Validation Error (cek response body)
   • 500 — Server Error (cek server log)
4. Cek Request Payload — data yang dikirim benar?
5. Cek Response — data yang diterima sesuai harapan?

Copy as cURL

Klik kanan request → Copy as cURL. Ini menghasilkan perintah cURL lengkap yang bisa kamu jalankan di terminal atau import ke Postman:

curl "https://api.example.com/users" \
  -H "Authorization: Bearer eyJhbG..." \
  -H "Content-Type: application/json"

Throttling (Simulasi Koneksi Lambat)

Dropdown No throttling → pilih:

• Fast 3G — simulasi 3G cepat
• Slow 3G — simulasi 3G lambat
• Offline — simulasi tanpa internet

Berguna untuk testing:

• Loading state
• Error handling saat offline
• Performance di koneksi lambat

Block Request

Klik kanan request → Block request URL atau Block request domain. Berguna untuk:

• Test behavior saat API gagal
• Test fallback gambar
• Test offline mode

Preserve Log

Centang Preserve log agar log tidak hilang saat halaman direfresh atau navigasi. Sangat penting saat debugging redirect atau form submission.

Disable Cache

Centang Disable cache untuk memastikan setiap request mengambil data fresh (bukan dari cache browser). Hanya berlaku saat DevTools terbuka.

Contoh Debugging Skenario

API mengembalikan 401

1. Filter Fetch/XHR → cari request yang gagal
2. Cek Headers → apakah Authorization header ada?
3. Cek apakah token sudah expired
4. Cek apakah token format-nya benar (Bearer <token>)

Data tidak muncul di UI

1. Cek apakah request API berhasil (status 200)
2. Cek Preview — apakah data yang dikembalikan benar?
3. Jika request belum terjadi → cek apakah code mengirim request
4. Jika data benar tapi UI salah → masalah di frontend rendering