Network Debugging
Memakai Network panel untuk membaca request, response, status, dan tanda awal masalah data.
Tujuan belajar
- Memahami apa yang perlu dilihat di Network panel
- Membedakan masalah request, response, dan render
- Membuat catatan debugging yang tidak hanya menebak
Isi lesson
5 blok- 1.Jangan langsung menyalahkan renderBelum selesaiWajib
- 2.Urutan cek yang praktisBelum selesaiWajib
- 3.Checklist debugging di local projectBelum selesaiWajib
- 4.Baca dokumentasi Network panelBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Jangan langsung menyalahkan render
WajibSaat data tidak tampil, penyebabnya belum tentu DOM atau render function. Bisa jadi request gagal, URL salah, response kosong, status error, atau bentuk data berbeda dari yang kamu kira.
Network panel membantu kamu melihat apa yang benar-benar terjadi antara browser dan server. Ini membuat debugging lebih berbasis bukti.
Bagian ini memengaruhi progres lesson.
Catatan penting
WajibUrutan cek yang praktis
Mulai dari request. Apakah request terkirim? Lalu cek status. Apakah 200, 404, 500, atau gagal network? Setelah itu cek response. Apakah datanya ada dan bentuknya sesuai? Baru setelah itu cek transformasi dan render.
Bagian ini memengaruhi progres lesson.
Checklist debugging di local project
WajibBuka Local Vanilla JavaScript App kamu, lalu lakukan satu debugging pass:
- Buka DevTools dan masuk ke tab Network.
- Reload halaman agar request terlihat dari awal.
- Pilih satu request data atau file JavaScript.
- Catat URL request, status, tipe response, dan preview response.
- Jika ada error, tentukan apakah masalahnya request, response, transformasi data, atau render.
- Tulis satu kalimat fix path: bagian mana yang perlu dicek atau diubah dulu.
Bagian ini memengaruhi progres lesson.
Documentation Bridge
WajibBaca dokumentasi Network panel
Gunakan dokumentasi resmi Chrome DevTools sebagai peta. Jangan hafalkan semua fitur panel.
Chrome DevTools
Inspect network activity
Fokus baca
- cara membuka Network panel
- cara melihat request yang terjadi
- status, headers, preview, dan response
- kapan reload halaman diperlukan
Abaikan dulu
- advanced filtering
- performance throttling detail
- export HAR workflow
Aksi setelah membaca
Buka satu request di local project kamu dan tulis: URL, status, response shape, dan dugaan awal sumber masalah.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Network panel membantu memastikan request benar-benar terjadi.
- Status dan response perlu dicek sebelum menyalahkan render.
- Debugging yang baik dimulai dari bukti kecil yang bisa dilihat.
- Berikutnya, kamu akan menyusun strategi console dan breakpoint untuk mengisolasi bug JavaScript.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Jangan langsung menyalahkan render.