Membaca Dokumentasi saat Debugging
Gunakan MDN dan DevTools secara terarah saat mini app lokal tidak berjalan sesuai harapan.
Tujuan belajar
- Membaca pesan error sebelum mengubah kode
- Menghubungkan error umum dengan area yang perlu dicek
- Membaca dokumentasi MDN secara selektif
- Menulis catatan debugging singkat
Isi lesson
5 blok- 1.Debugging bukan menebak secara acakBelum selesaiWajib
- 2.Contoh kasus: Cannot read properties of nullBelum selesaiOpsional
- 3.Baca dokumentasi resmi secara terarahBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Debugging bukan menebak secara acak
WajibSaat mini app lokal tidak berjalan, kebiasaan paling mahal adalah mengubah banyak baris sekaligus tanpa membaca tanda yang diberikan browser.
Engineer biasanya mulai dari pertanyaan kecil: apakah file terbaca, apakah selector menemukan elemen, apakah event terpasang, apakah value yang dibaca sesuai, apakah data tersimpan, dan apakah ada error di Console.
Dokumentasi resmi membantu kamu mengecek arti API yang dipakai. Untuk tahap ini, kamu belum perlu membaca semua dokumentasi JavaScript. Kamu hanya perlu membuka halaman yang relevan dengan masalah yang sedang kamu debug.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
OpsionalContoh kasus: Cannot read properties of null
Error ini sering berarti querySelector tidak menemukan elemen. Penyebabnya bisa id di HTML tidak sama dengan selector, script berjalan sebelum HTML siap, atau file HTML yang dibuka bukan file yang sedang kamu edit.
Opsional, tidak menghambat penyelesaian lesson.
Documentation Bridge
WajibBaca dokumentasi resmi secara terarah
Buka dokumentasi hanya untuk API yang sedang kamu pakai. Fokus pada definisi, contoh dasar, dan catatan error yang relevan.
MDN Web Docs
Document: querySelector() method
Fokus baca
- selector yang cocok dengan CSS selector
- return value saat elemen ditemukan atau tidak ditemukan
- contoh memilih elemen sederhana
Abaikan dulu
- selector kompleks
- CSS.escape
- spesifikasi DOM detail
MDN Web Docs
EventTarget: addEventListener() method
Fokus baca
- cara memasang listener
- nama event seperti click dan submit
- fungsi callback sebagai respons event
Abaikan dulu
- options advanced
- event propagation detail
- AbortSignal
MDN Web Docs
Window: localStorage property
Fokus baca
- setItem dan getItem
- data tersimpan sebagai string
- batasan storage di browser
Abaikan dulu
- storage event antar tab
- quota detail
- private browsing edge case
Chrome DevTools Docs
Debug JavaScript
Fokus baca
- membaca Console
- memahami lokasi error
- menggunakan breakpoint dasar saat perlu
Abaikan dulu
- source maps
- blackboxing
- performance profiling
Aksi setelah membaca
Buka satu error atau behavior yang belum sesuai di project lokalmu, lalu tulis API apa yang kamu cek di dokumentasi dan perubahan apa yang kamu buat.
Bagian ini memengaruhi progres lesson.
Writing practice
WajibLatihan menulis
Tulis catatan debugging singkat untuk mini app lokal kamu. Jelaskan gejala, dugaan penyebab, dokumentasi yang kamu buka, dan perubahan yang kamu lakukan.
Tulis draft dulu sebelum menandai writing practice selesai.
0/220 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Ringkasan
Wajib- Debugging dimulai dari gejala, Console, dan perubahan kecil yang terarah.
- querySelector yang menghasilkan null biasanya terkait selector, id, timing script, atau file yang salah dibuka.
- Dokumentasi MDN dipakai untuk mengecek API yang sedang digunakan, bukan dibaca sebagai kamus besar sekaligus.
- Catatan debugging membantu kamu menjelaskan proses berpikir saat project direview.
- Berikutnya kamu akan mengecek readiness module lewat project checklist dan catatan project.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Debugging bukan menebak secara acak.