Tangkap dan tampilkan setiap permintaan jaringan secara real-time.
Tab Network di Chrome DevTools memang canggih tetapi berat — memakan banyak ruang layar, ter-reset saat Anda berpindah halaman, dan mengharuskan Anda beralih dari konten halaman. Network Monitor menyediakan fitur pemantauan jaringan yang esensial dalam panel mengambang ringan yang berada di atas halaman.
Alat ini mencegat request XHR dan Fetch serta memantau pemuatan resource melalui Performance API, menampilkan setiap request jaringan saat terjadi. Setiap request menampilkan URL, metode HTTP (GET, POST, PUT, DELETE), status code (diberi kode warna: hijau untuk 2xx, kuning untuk 3xx, merah untuk 4xx/5xx), ukuran respons dalam byte, dan durasi dalam milidetik. Klik request mana pun untuk melihat detailnya: request header, response header, payload request, preview body respons, dan rincian timing.
Request yang dikirim melalui Beacon API (umum digunakan untuk ping analytics yang dikirim tepat sebelum halaman unload) juga ditangkap, yang biasanya sulit diamati karena terjadi saat navigasi berlangsung. Ini adalah alat yang terpisah dari WebSocket Inspector — Network Monitor berfokus pada trafik request/response HTTP, sementara koneksi WebSocket dan frame-nya ditangani oleh alat khusus WebSocket Inspector, sehingga setiap panel tetap fokus dan mudah dibaca alih-alih mencampur dua jenis trafik yang sangat berbeda dalam satu feed yang ramai.
Setiap permintaan (request) jaringan muncul di panel saat terjadi — pemuatan halaman, panggilan API, pemuatan aset (lazy-load), dan pengambilan data latar belakang. Feed diperbarui secara real-time tanpa perlu penyegaran manual.
Klik permintaan apa pun untuk melihat detail lengkap: URL permintaan, metode, header, payload (untuk POST/PUT), header respons, pratinjau bodi respons (format otomatis JSON), kode status, ukuran, dan rincian waktu (timing).
Filter permintaan berdasarkan tipe: XHR/Fetch (panggilan API), JS (skrip), CSS (stylesheet), IMG (gambar), Font (web font), atau Semua. Isolasi lalu lintas API dari pemuatan sumber daya untuk fokus pada hal yang penting.
Kode status diberi kode warna untuk pengenalan instan: hijau untuk 2xx (berhasil), kuning untuk 3xx (pengalihan), merah untuk 4xx (kesalahan klien) dan 5xx (kesalahan server). Permintaan yang gagal akan langsung terlihat.
Setiap permintaan menunjukkan ukuran respons (dalam KB) dan durasi total (dalam milidetik). Identifikasi panggilan API yang lambat, sumber daya yang terlalu besar, dan permintaan tidak perlu yang memengaruhi performa halaman.
Bilah ringkasan menunjukkan total hitungan permintaan dan gabungan ukuran untuk semua permintaan yang ditangkap. Filter ringkasan untuk melihat total per tipe — seberapa banyak bandwidth yang dihabiskan untuk skrip vs gambar vs panggilan API.
Pantau permintaan XHR/Fetch untuk memverifikasi bahwa frontend Anda memanggil endpoint API yang benar dengan parameter yang tepat. Klik untuk memeriksa payload permintaan dan bodi respons — temukan ketidakcocokan format data secara instan.
Entri merah 404 dan 500 segera menyoroti sumber daya yang rusak atau panggilan API yang gagal. Lihat URL mana yang gagal, kapan kegagalan terjadi, dan respons kesalahan apa yang dikembalikan server.
Urutkan berdasarkan durasi untuk menemukan permintaan paling lambat. Urutkan berdasarkan ukuran untuk menemukan sumber daya terbesar. Total ringkasan menunjukkan gambaran bandwidth penuh — apakah halaman membuat terlalu banyak permintaan?
Lihat permintaan jaringan apa yang dibuat halaman di latar belakang — ping analitik, panggilan heartbeat, permintaan polling, sumber daya lazy-loaded. Pahami aktivitas jaringan penuh di luar apa yang terlihat oleh pengguna.
Filter permintaan dan periksa domain mana yang dihubungi. Identifikasi skrip pihak ketiga yang melakukan panggilan jaringan tak terduga — piksel pelacakan, pengumpulan data, atau panggilan API eksternal yang tidak Anda ketahui.
Buka dok mengambang DevSuite Pro dan klik ikon Monitor Jaringan. Panel akan terbuka dan segera mulai menangkap permintaan jaringan.
Gunakan halaman secara normal. Setiap permintaan jaringan akan muncul di feed saat dilakukan — panggilan API, pemuatan sumber daya, dan pengambilan data latar belakang semuanya tertangkap.
Klik filter tipe (XHR, JS, CSS, IMG, Font) untuk mempersempit tampilan. Tampilkan hanya panggilan API untuk men-debug pengambilan data, atau hanya gambar untuk memeriksa pemuatan aset.
Klik baris permintaan apa pun untuk memperluas detailnya: URL, header, payload, bodi respons, kode status, ukuran, dan waktu.
Kode status merah (404, 500) menunjukkan permintaan yang gagal. Durasi yang lambat menandai hambatan performa. Ukuran besar menyarankan sumber daya yang perlu dioptimalkan.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
