Tangkap dan tampilkan setiap permintaan jaringan secara real-time.
Tangkap dan tampilkan setiap permintaan jaringan secara real-time. Alat ini memberikan visibilitas penuh terhadap lalu lintas data antara browser dan server, memudahkan Anda men-debug API dan mengoptimalkan pemuatan aset.
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.
