Cara Mengakses Network Tab di Google Chrome
Untuk memantau aktivitas jaringan atau network request pada sebuah situs web di Google Chrome, Anda harus menggunakan fitur bawaan bernama Developer Tools. Fitur ini memungkinkan pengembang dan pengguna untuk melihat setiap permintaan data (HTTP/HTTPS) yang dikirim atau diterima oleh browser saat memuat halaman.
Berikut adalah langkah-langkah teknis untuk mengaksesnya:
- Buka Google Chrome dan arahkan ke situs web yang ingin Anda periksa.
- Tekan tombol F12 pada keyboard, atau klik kanan di area mana saja pada halaman web lalu pilih Inspect.
- Setelah panel Developer Tools terbuka, cari dan klik tab bertuliskan Network.
- Muat ulang halaman (tekan F5 atau Ctrl + R) untuk mulai menangkap data trafik jaringan secara real-time.
Memahami Data pada Panel Network
Panel Network menampilkan daftar semua file, skrip, gambar, dan panggilan API yang diproses oleh browser. Berikut adalah tabel ringkasan kolom utama yang perlu Anda perhatikan untuk analisis performa atau debugging:
| Kolom | Fungsi |
|---|---|
| Name | Nama file atau endpoint API yang diminta. |
| Status | Kode status HTTP (contoh: 200 OK, 404 Not Found, 500 Server Error). |
| Type | Jenis konten (XHR, Fetch, Script, Img, CSS, dll). |
| Time | Durasi waktu yang dibutuhkan untuk menyelesaikan request. |
| Waterfall | Visualisasi urutan pemuatan sumber daya. |
Tips Troubleshooting Network Request
Jika Anda mengalami kendala seperti Failed Network Error atau ERR_CONNECTION_RESET, panel Network akan memberikan indikasi visual melalui warna teks atau status code. Berikut adalah panduan singkat untuk membaca status tersebut:
- Status 2xx (Success): Menandakan request berhasil diproses oleh server.
- Status 4xx (Client Error): Menandakan ada kesalahan pada permintaan, seperti URL salah atau akses ditolak.
- Status 5xx (Server Error): Menandakan masalah ada pada sisi server (seperti yang sering terjadi pada kasus ERR_CONNECTION_RESET).
Untuk memfilter data agar lebih mudah dibaca, gunakan kolom Filter di bagian atas panel Network. Anda bisa mengetikkan kata kunci seperti XHR untuk hanya melihat panggilan API, atau Img untuk melihat aset gambar saja. Jika Anda ingin membersihkan log yang menumpuk, klik ikon Clear (ikon lingkaran dengan garis miring) di pojok kiri atas panel Network.
Pastikan koneksi internet Anda stabil sebelum melakukan pengujian. Jika Anda merasa performa web lambat, perhatikan kolom Time dan Waterfall untuk mengidentifikasi file mana yang memiliki ukuran terlalu besar atau waktu respon server yang terlalu lama.