FluentStack

Breakpoints dan Console Strategy

Mode tersedia: dark, light, paper
MasukDaftar
Intermediate · Level 5: JavaScript AdvancedIntermediate50 menitBahasa Indonesia

Breakpoints dan Console Strategy

Menggunakan console dan breakpoint untuk mengisolasi bug JavaScript dengan lebih terarah.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menentukan lokasi bug dengan pertanyaan kecil
  • Memakai console log secara sengaja
  • Memahami kapan breakpoint lebih cocok daripada menambah log
JavaScriptDebuggingBreakpoints

Isi lesson

5 blok
  1. 1.
    Debugging bukan menebak secepat mungkinBelum selesaiWajib
  2. 2.
    Bug kecil: total belanja menjadi string anehBelum selesaiWajib
  3. 3.
    Pakai pertanyaan debuggingBelum selesaiWajib
  4. 4.
    Coding practiceBelum selesaiWajib
  5. 5.
    RingkasanBelum selesaiWajib

Debugging bukan menebak secepat mungkin

Wajib

Semakin besar JavaScript app, semakin mahal kalau kamu hanya menebak. Debugging yang baik mengecilkan area masalah.

Gunakan console untuk melihat nilai penting di titik tertentu. Gunakan breakpoint saat kamu perlu menghentikan kode dan melihat perubahan value langkah demi langkah.

Bagian ini memengaruhi progres lesson.

Bug kecil: total belanja menjadi string aneh

Wajib
js
const cartItems = [
  { name: "Keyboard", price: "500000" },
  { name: "Mouse", price: "200000" },
];

const total = cartItems.reduce((sum, item) => {
  return sum + item.price;
}, 0);

console.log(total); // "0500000200000"

Bug ini terjadi karena price masih string. Console membantu melihat value, tetapi breakpoint akan lebih jelas jika kamu ingin melihat perubahan sum di setiap iterasi.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Pakai pertanyaan debugging

Tanyakan tiga hal: nilai apa yang aku harapkan, nilai apa yang benar-benar terjadi, dan di baris mana nilai mulai berbeda? Pertanyaan ini membuat console dan breakpoint punya tujuan.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Perbaiki bug total dengan log yang jelas

Latihan mengisolasi bug string price dan memperbaiki perhitungan total.

Tujuan awal: Fokus di tab JS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis4 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Console log sebaiknya menjawab pertanyaan debugging yang spesifik.
  • Breakpoint berguna saat kamu perlu melihat perubahan value langkah demi langkah.
  • Bug lebih mudah diperbaiki setelah kamu tahu kapan value mulai menyimpang.
  • Berikutnya, Uji Kompetensi akan mengecek Browser API, transformasi data, dan debugging strategy dalam satu flow.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Debugging bukan menebak secepat mungkin.

Memuat progresReview module