Testing, Debugging, dan Kualitas Kode · 5/7

Debugging secara metodis

Susun hipotesis, uji, persempit pencarian. Breakpoint, tab Network, dan Node inspector.

Baca 30 menit

Setelah pelajaran ini kamu bisa

Men-debug dengan menyusun dan menguji hipotesis
Membagi dua ruang pencarian alih-alih menebak
Memakai breakpoint, dan tahu kapan log lebih baik
Men-debug masalah yang hanya terjadi di production

Sebagian besar orang men-debug dengan mengubah-ubah sampai berhasil. Itu kadang berhasil, tidak mengajarkan apa pun, dan sering meninggalkan bug kedua. Debugging adalah sebuah pencarian, dan ada metodenya.

Reproduksi dengan andal. Bug yang tidak bisa kamu picu sesuai keinginan tidak bisa diperbaiki, cuma ditebak. Langkah ini adalah sebagian besar pekerjaannya.
Baca error-nya dengan benar. Frame teratas dari stack-nya, lalu baris pertama yang merupakan file-mu sendiri. Sebagian besar orang melewati ini dan kehilangan satu jam.
Susun satu hipotesis. "Id venue-nya datang sebagai string." Sesuatu yang cukup spesifik untuk bisa salah.
Uji dengan satu perubahan. Catat nilai itu, atau pasang breakpoint. Satu perubahan, satu jawaban.
Persempit ruangnya. Terkonfirmasi atau terbantah, kamu sudah memotong masalahnya jadi separuh. Ulangi.
Perbaiki penyebabnya, bukan gejalanya. Lalu tambahkan sebuah test, supaya ia tidak bisa kembali.

Coba sendiri

Pencarian linear versus pemotongan separuh, atas seratus commit. Inilah yang dilakukan `git bisect` untukmu.

// 100 commits. The bug was introduced at commit 73 and is present after it.
const BROKE_AT = 73;
const isBroken = (commit) => commit >= BROKE_AT;

// Checking one commit means building and testing: about 30 seconds.
const CHECK_SECONDS = 30;

function linearSearch() {
  let checks = 0;
  for (let c = 0; c < 100; c++) {
    checks++;
    if (isBroken(c)) return { found: c, checks: checks };
  }
  return { found: null, checks: checks };
}

const linear = linearSearch();
const binary = bisect();

console.log("linear search:");
console.log("   found commit " + linear.found + " after " + linear.checks + " checks");
console.log("   time: " + Math.round(linear.checks * CHECK_SECONDS / 60) + " minutes");
console.log("");
console.log("bisect:");
console.log("   found commit " + binary.found + " after " + binary.checks + " checks");
console.log("   time: " + Math.round(binary.checks * CHECK_SECONDS) + " seconds");
console.log("   path: " + binary.path.join(", "));
console.log("");
console.log("Both find the same commit. One takes 37 minutes, the other 3 minutes.");
console.log("git bisect run <command> automates exactly this.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Breakpoint versus logging

Pakai breakpoint saat	Pakai logging saat
Kamu tidak tahu nilai mana yang salah	Kamu tahu apa yang harus diamati
Kamu perlu melihat seluruh scope-nya	Kamu butuh banyak iterasi sekaligus
Kamu ingin menelusuri call stack-nya	Ini terjadi di server yang tidak bisa kamu sambungi
Kamu ingin mengubah sebuah nilai lalu lanjut	Timing-nya penting dan menjeda akan mengubahnya

// A conditional breakpoint - right-click the line number in DevTools.
// Only pauses on the row that matters, instead of 500 times.
//   condition:  venue.id === 42

// console.table for arrays of objects - far more readable than a log.
console.table(bookings);

// console.group to keep a loop's output legible.
for (const b of bookings) {
  console.group("booking " + b.id);
  console.log("nights", b.nights);
  console.groupEnd();
}

// A one-off assertion, when you believe something is impossible.
console.assert(total >= 0, "negative total", { bookings, total });

// Node: attach a real debugger to a server process.
//   node --inspect-brk server.js
// then open chrome://inspect in Chrome.

Bug yang hanya terjadi di production

Bug tersulit adalah yang tidak bisa kamu reproduksi. Penyebabnya hampir selalu perbedaan antar environment, dan daftar kandidat perbedaannya pendek.

Data. Production punya row yang tidak kamu punya: null, nama berunicode, booking dari tahun 1970.
Skala. 500 row alih-alih 3 — query N+1 dari modul data.
Concurrency. Dua pengguna sekaligus, yang tidak pernah terjadi di laptopmu.
Environment variable. Ada di lokal, tidak ada di sana.
Zona waktu dan locale. Server-nya jalan di UTC dan kamu tidak.
Perbedaan build. Kode terminifikasi, tanpa peringatan dev, caching berbeda.
Sensitivitas huruf besar-kecil. Button.tsx versus button.tsx jalan di macOS, gagal di Linux.

Tugas praktik

Latih bisect. Di repository latihan, buat sepuluh commit di mana commit kelima memasukkan sebuah test yang gagal. Lalu jalankan git bisect start, git bisect bad, git bisect good HEAD~9, dan biarkan ia menuntunmu. Terakhir coba git bisect run bun run test dan lihat ia menemukan commit-nya tanpa diawasi.

Hasil yang diharapkan

Tiga atau empat pemeriksaan untuk menemukan commit kelima.