Panel Network di DevTools mencatat setiap request yang dibuat halaman: file HTML-nya, CSS, JavaScript, gambar, sampai panggilan API lewat fetch. Tiap request satu baris, lengkap dengan status, jenis, ukuran dan lamanya, dan bisa diklik untuk melihat isinya. Bayangin riwayat pesanan di aplikasi pesan antar makanan: tiap pesanan satu baris, ada yang sampai, ada yang gagal. Ketuk satu pesanan, dan kamu lihat apa yang kamu pesan, apa yang datang, dan ke mana waktunya habis: lama di dapur restoran, atau lama di perjalanan.
🧪 Tebakan cepat: request
/api/usersmakan waktu 1,2 detik. Di tab Timing, Waiting for server response 1.200 ms, dan fase lain di bawah 5 ms. Yang lambat server-nya atau koneksimu? Tebak dulu, jawabannya ada di bagian "Timing: ke mana waktunya habis".
Merekam request
Network cuma mencatat selama DevTools terbuka. Jadi buka panel Network dulu, baru lakukan aksinya. Untuk melihat semua yang dimuat halaman dari awal, tekan Ctrl+R (Mac: Cmd+R) dengan Network terbuka. Di toolbar-nya ada dua centang yang sering dipakai: Preserve log (catatan gak dihapus saat pindah halaman) dan Disable cache (semua file diambil ulang dari server, cuma berlaku selama DevTools terbuka).
Membaca tabel request
Halaman daftar user di http://localhost:3000 membuat lima request:
| Name | Status | Type | Size | Time |
|---|---|---|---|---|
index.html |
200 | document | 5,2 kB | 98 ms |
logo.png |
200 | png | 15,3 kB | 40 ms |
missing.png |
404 | png | 300 B | 22 ms |
users |
200 | fetch | 620 B | 125 ms |
auth |
401 | fetch | 310 B | 43 ms |
- Name adalah ujung URL-nya, Type jenisnya (
fetchartinya dipanggil JavaScript), Size ukuran yang dikirim lewat jaringan, Time lama dari mulai sampai selesai. - Request yang gagal ditulis merah. Di sini
missing.png(404) danauth(401). Console juga mencatatnya, misalnyaGET http://localhost:3000/api/auth 401 (Unauthorized). - Tombol filter di atas tabel (All, Fetch/XHR, Doc, CSS, JS, Img...) menyaring per jenis. Untuk urusan API, pilih Fetch/XHR.
Status code: jawaban server dalam tiga digit
2xxberhasil:200 OK,201 Created(data baru dibuat),204 No Content.3xxpengalihan atau cache:301dan302mengarahkan ke URL lain.304 Not Modifiedartinya "file-nya belum berubah sejak kamu ambil, pakai salinan di cache-mu". Browser bertanya sambil membawa tanda versi file yang dia simpan, server menjawab 304 tanpa isi, jadi ukurannya kecil sekali.4xxsalah di sisi permintaan:400data yang dikirim gak valid,401belum login atau token-nya gak ada,403login tapi gak boleh,404gak ketemu,422validasi gagal (Laravel memakai ini untuk form).5xxsalah di server:500 Internal Server Error,503server sedang gak bisa melayani.
Detail satu request
Klik sebuah baris, dan panel detailnya terbuka dengan beberapa tab:
- Headers: URL, method (
GET,POST...), status code, lalu Response Headers dari server dan Request Headers yang dikirim browser. - Payload: data yang dikirim, misalnya isi form atau body JSON.
- Preview: isi jawaban yang sudah dirapikan, JSON jadi pohon yang bisa dibuka.
- Response: isi jawaban mentah, persis teks yang dikirim server.
- Timing: rincian waktu request itu.
Kenapa auth 401? Buka Headers-nya: di Request Headers gak ada Authorization: Bearer .... Kodenya lupa mengirim token. Tab Response menunjukkan jawaban server: {"message":"Unauthenticated."}. Setelah header-nya ditambahkan, status-nya jadi 200.
Timing: ke mana waktunya habis
| Fase | Artinya | Kalau lama, curigai |
|---|---|---|
| Queueing, Stalled | menunggu giliran di browser | terlalu banyak request sekaligus |
| DNS Lookup | mencari IP dari nama domain | DNS lambat |
| Initial connection | membuka koneksi (termasuk SSL untuk https) | server jauh |
| Request sent | mengirim permintaan | upload besar |
| Waiting for server response | menunggu byte pertama jawaban (TTFB) | server: query database lambat, cold start, proses berat |
| Content Download | mengunduh isi jawaban | jawaban besar atau koneksi lambat |
Request users yang normal: Waiting 120 ms dari total 125 ms. Kalau Waiting jadi 1.200 ms sementara fase lain tetap cepat, berarti server-nya yang lama berpikir. Itu jawaban tebakannya: masalahnya di server, bukan di koneksimu. Mempercepat internet gak akan menolong, yang harus diperbaiki kode backend atau query-nya. Kebalikannya, kalau yang lama Content Download, perkecil jawabannya (kompresi, pagination).
Alat lain di toolbar
- Throttling (menu yang awalnya bertulisan No throttling): pilih preset lambat seperti Slow 4G, atau Offline, untuk melihat tampilan loading dan penanganan error-mu.
- Klik kanan request, lalu Copy, Copy as cURL: request yang sama sebagai perintah terminal.
- Klik kanan request, lalu Block request URL: pura-pura file itu gagal, untuk menguji fallback-mu.
⚠️ Jebakan yang sering ketemu
- Membuka Network setelah request-nya lewat. Tabelnya kosong. Buka dulu, lalu ulangi aksinya atau tekan
Ctrl+R. - Mengira 304 itu error. 304 artinya cache-mu masih benar. Yang gagal mulai dari 400.
- Cuma melihat status. 200 tapi daftar di layar kosong? Buka Preview atau Response: mungkin datanya kosong atau bentuknya beda dari dugaanmu.
- Mengukur kecepatan dengan Disable cache menyala. Pengunjung yang kembali memakai cache, jadi ukur juga tanpa centang itu.
TL;DR: Network mencatat setiap request selama DevTools terbuka, jadi buka dulu lalu ulangi aksinya atau Ctrl+R. Tiap baris punya Name, Status, Type, Size dan Time, yang gagal merah, dan filter Fetch/XHR menyisakan panggilan API. Status: 2xx berhasil, 3xx pengalihan atau cache (304 Not Modified: pakai salinan di cache, tanpa isi), 4xx salah di permintaan (401 token gak ada), 5xx salah di server. Klik request untuk Headers (yang dikirim dan diterima), Payload, Preview dan Response (isi jawaban), dan Timing. Waiting for server response (TTFB) yang lama sementara fase lain cepat berarti server-nya yang lambat.
