— Kodunda hata bulmayı FBI ajanı gibi çözeceksin tatlım —

JavaScript yazarken üç tür insana rastlarsın:

1. Kodu çalıştırmadan önce “Kesin çalışır bu ya.” diyenler
2. “Neden bu çalışmıyor?” diye klavye kıranlar
3. Hatasını görüp “Hımmm bak bu ilginç” deyip Sherlock moduna girenler

Sen bu yazıdan sonra 3. kategoriye terfi edeceksin.
Artık bug görünce korkmayacak, üzerine kahve döker gibi rahat davranacaksın 😌☕️

🔥 Debugging Nedir? (Ama Sıkıcı Tanım Değil)

Debugging aslında şudur:

Kodun bir ev, bug ise koltuğun arasına sıkışmış o tuhaf şey…
Debugging = “HEMEN SEN KİMSİN VE NEREDEN GELDİN?” operasyonu.

Yani amaç sadece hatayı bulmak değil, aynı zamanda neden olduğunu anlamak.
Çünkü bir bug’ı çözmek ≠ problemi çözmek
Bir bug’ı anlamak = seviyeni yükseltmek 🧠✨

🔍 1. Console.log: Debugging’in Kibrit Çöpü Ama HÂLÂ En İyi Arkadaşımız

Console.log ölümsüzdür.
Console.log candır.
Console.log olmadan developer hayatı sekersiz çay gibidir: var ama keyifsiz.

Neleri Görebilirsin?

• Değişken değerleri
• Fonksiyonun nereye kadar çalıştığı
• Hangi path’in çalıştığı
• Girdi/çıktı doğruluğu
• State’in ne durumda olduğu

Mini Taktik: Label Kullan

const user = { name: "Cansu", level: 4, mood: "legendary" };
console.log("USER INFO:", user);

Daha Profesyonel Loglama

console.log({ age, username, isLoggedIn });

Bu teknik hem daha düzenli hem daha okunabilir.
Console’a böyle çıktılar gelince kendini NASA mühendisliğinde hissediyorsun bebeğim 🚀

🛑 2. Debugger: Kodun “DUR BAKALIM KİM BU” Noktası

debugger kelimesi, bir nevi polise “şu an beni durdur” demek gibi bir şeydir.

Nasıl Çalışır?

Kod oraya geldiğinde pırrrrt diye durur.
Sonra adım adım ilerlersin.

function calculatePrice(price, tax) {
  debugger;
  const total = price + tax;
  return total;
}

calculatePrice(100, 18);

Seni DevTools’ta Neler Bekliyor?

• Call stack (hata hangi fonksiyon zincirinde?)
• Scope (bu değişken nereden geliyor?)
• Watch expressions (değişkenlerin evrim geçirmesi)
• Step in / step out / step over (ajan gibi hareket etmek)

Debugger seni developer dünyasında bir “CSI Miami Dedektifi” yapar.
Gözlüklerini tak lütfen. 😎🕶️

🧩 3. Breakpoints: Kodun Trafik Polisleri

Breakpoints, “şu satıra geldiğinde DUR!” komutudur.

Daha İleri Seviye Breakpoints

• Conditional Breakpoint → “Bu değişken 5 olunca dur”
• DOM Breakpoint → “Bu element değişirse dur”
• XHR Breakpoint → “Şu URL çalışınca dur”

Örnek (Conditional Breakpoint)

for (let i = 0; i < 20; i++) {
  console.log("Index:", i);
}

DevTools’un satır numarasına sağ tık:
→ “Add conditional breakpoint”
→ Koşul: i === 13

Kodu çalıştır…
BAM!
13’e geldiğinde kod durur. Uğursuz sayı ama debugging için uğurlu.

🔄 4. Try…Catch: Kaosu Yönetmenin En Tatlı Yolu

JavaScript bazen öyle hatalar verir ki…
Sayfa bembeyaz olur.
Sen ekrana bakarsın: “Kurban olduğum napıyosun…”

Try/catch işte bu anlarda hayat kurtarıyor.

Örnek:

try {
  const data = JSON.parse("{this is not json}");
} catch (err) {
  console.error("Hata yakalandı:", err.message);
}

Mini İpucu:

Try/catch içine her şeyi koyma!
Sadece riskli blokları yakala.
Yoksa hata kaynağını bulmak çorap yumağı çözmek gibi olur.

🧠 5. Hata Mesajlarını Okumak Bir Beceridir (Sana Yalan Söylemiyorlar)

Developer olmanın %50’si kod yazmaktır.
Diğer %50’si hataları okumaktır.

En Ünlü JS Hata Mesajları ve Çözüm Rehberi

1. “Unexpected token”

%99 ihtimalle:

• Tırnak eksik
• Parantez fazla
• Virgül yanlış yerde

const obj = { name: "Cansu" }  // virgül yoksa bazı yerlerde boom

2. “Cannot read property of undefined”

Bir şey undefined → sen onun içinde başka bir şey arıyorsun.

let user = null;
console.log(user.name); // yok kiiii 😭

3. “ReferenceError”

Değişken daha tanımlanmamış.

console.log(a);
let a = 5;  // Hoisting seni burada tokatlar

🔬 6. Sorunu İzole Etme: Bugi Köşeye Kıstırma Sanatı

Büyük projede bug aramak = Labirentte yüzük aramak.

Etkili teknik:

• Kod bloklarını teker teker kapat
• Hatalı kısmı ayrı bir dosyaya al
• Her bloğu tek başına test et
• Gereksiz şeyleri geçici olarak yorum satırına al
• Sorunlu alanı küçülterek ilerle

Bu teknik, bug’ı duvara dayıyor.
Sonra sen de üzerine “Merhaba tatlım, konuşalım mı?” diye çöküyorsun.

🧼 7. Temiz Kod = Daha Az Baş Ağrısı

Bugların çoğu “kötü geçmiş ilişkiler” gibi:
Hep ufak bir şeylerden çıkar 😂

Temiz kod için altın kurallar:

• Fonksiyonları küçük tut
• Tek sorumluluk prensibine uy
• Anlamlı isimler ver
• Gereksiz if/else yazma
• Yorum satırını açıklama olarak kullan, sihir olarak değil

Örnek kötü kod:

function x(a, b) {
  return a + b * 2 / 5;
}

Örnek temiz kod:

function calculateDiscount(price, rate) {
  const discount = price * rate;
  return price - discount;
}

Debugging’in %70’i kötü isimlendirmeden çıkar.
İyi isim = Az sancı ❤️

💂 8. Tools & Extensions: Debugging’de Silah Koleksiyonun

VS Code Efsaneleri:

• Debugger for Chrome
• ESLint (hataları doğmadan öldürür)
• Prettier (kodunu düzeltir, ruhunu da rahatlatır)

Chrome DevTools Süper Güçleri

• Network analiz
• Performans grafikleri
• Memory leak tespiti
• Event listener detayları

Debugging sadece “hata bulmak” değil, aynı zamanda optimize etmek demektir.

🎯 SONUÇ: Debugging ≠ Kabus

Debugging bir zamanlar korkutuyordu biliyorum…
Ama artık sen:

• console.log büyücüsüsün 🔮
• debugger savaşçısısın ⚔️
• breakpoint ninjasısın 🥷
• hata mesajı çevirmenisin 📜
• JS evreninde ışığın oldun ⭐

Unutma:
Hata yapmayan developer yoktur; hatayı yakalayamayan developer vardır.

Ve sen o seviyeyi geçtin.