Giriş

Hata ayıklama (debugging), yazılım geliştirme sürecinin sürekli tekrarlanan ve verimliliği artıran bir parçasıdır. Bu rehberde tarayıcıda JavaScript için Chrome DevTools ve Python tarafında pdb kullanılarak nasıl hızlı ve etkili hata ayıklama yapılabileceğini uygulamalı şekilde ele alacağız. Rehberdeki adımlar günlük geliştirici iş akışına uygulanabilir, ayrıca kolay kod örnekleri içerir.

Tarayıcı araçları ve Python'un resmi dökümantasyonları hata ayıklama yeteneklerini anlatır; DevTools ile ilgili güncellemeler için Microsoft Learn dokümanına ve Python'un hata ayıklama bölümüne bakabilirsiniz: DevTools (Microsoft Learn) ve Python Debugging and Profiling (docs.python.org).

Hızlı hazırlık: araçlar ve temel ayarlar

Başlamadan önce kısa bir hazırlık listesi:

• Tarayıcı: Chrome veya Chromium tabanlı tarayıcı kullanın; DevTools açık ve güncel olmalı.
• Python: Hedef sürümde pdb modülünün yüklü olduğunu doğrulayın (standart kütüphane parçasıdır).
• Kaynak haritaları (source maps): Transpile edilmiş veya minify edilmiş JS kullanıyorsanız source map ayarlarının etkin olduğundan emin olun.
• Versiyon notları ve resmi kılavuzlar için verilen bağlantılara göz atın (yukarıdaki bağlantılar).

Tarayıcıda JavaScript hata ayıklama

Chrome DevTools, tarayıcı üzerinde JavaScript kodlarını adım adım izleme ve hata ayıklama imkânı sağlar. Aşağıdaki adımlar günlük kullanım için pratik bir akış sunar.

Adım adım: DevTools'ta breakpoint kullanımı

1. DevTools'u açın: Sağ tık -> "İncele" veya kısayollarla açın.
2. Sources paneline geçin ve hata ayıklamak istediğiniz dosyayı bulun.
3. İlgili satır numarasına tıklayarak breakpoint ekleyin. Koşullu breakpoint gerekiyorsa satır numarasına sağ tıklayıp bir koşul girin.
4. Sayfayı tetikleyin (yenileme veya kullanıcı etkileşimi) ve DevTools'un durduğunu gözleyin.
5. Adımlama kontrolleriyle (step over, step into, step out) kodu inceleyin ve Scope / Watch panellerinden değişken değerlerini izleyin.
6. Console panelinde yürütme bağlamında ifadeler değerlendirebilir veya küçük denemeler yapabilirsiniz.

Kolay kod örnekleri — JavaScript

Aşağıdaki örnek değişken gölgeleme (variable shadowing) nedeniyle beklenmeyen bir sonuç üretir. DevTools ile bunu nasıl tespit edeceğinizi gösterir.

Örnek JS:
let total = 0;
[1, 2, 3].forEach(function(total) {
total += 1;
});
console.log(total); // Beklenen 6, fakat 0 döner

Nasıl debug edilir:

• Sources panelinde forEach callback'imindeki satıra breakpoint koyun.
• Adım adım girerek callback içinde total değişkeninin yerel scope ile global scope arasında nasıl farklılaştığını inceleyin.
• Watch paneline "total" ekleyin ve hem local hem global değerleri kontrol edin.

Ek DevTools ipuçları

• Pause on exceptions: Hatalı yerleri bulmak için exception'larda otomatik durmayı açın.
• Event listener breakpoints: DOM olayları (click, submit) için breakpoint koyun.
• Source maps / Pretty print: Transpile edilmiş veya minified kodda orijinal kaynağa dönebilmek için source map kullanın ve gerekirse pretty print ile okunabilir hale getirin.
• Console: Yerel scope içinde ifadeleri çalıştırarak hızlı doğrulama yapın.

Python: pdb ile hata ayıklama

Python'un pdb modülü, kodu satır satır izleme, yığın çerçevelerini (stack frames) inceleme ve değişken değerlerini sorgulama gibi işlevler sağlar. Resmi Python belgelerinde pdb ve hata ayıklama araçları açıklanmıştır: Python Debugging and Profiling.

Başlarken: iki temel yöntem

• Komut satırından: python -m pdb script.py ile programınızı pdb içinde başlatın.
• Program içinde: ilgili yerde import pdb; pdb.set_trace() (veya Python 3.7+ için breakpoint()) ekleyerek çalışırken duraklatın.

Kolay kod örnekleri — Python

Aşağıdaki örnek, sıfıra bölme hatasını pdb ile nasıl tespit edebileceğinizi gösterir.

Örnek Python:
def divide(a, b):
return a / b

def main():
x = 10
y = 0
import pdb; pdb.set_trace() # Burada yürütme duracak result = divide(x, y)
print(result)

if __name__ == '__main__':
main()

pdb çalıştığında aşağıdaki adımları izleyin:

• p expression ile değişkenleri inceleyin (ör. p x, p y).
• n ile bir sonraki satıra geçin, s ile fonksiyon içine adım atın, c ile devam edin.
• where (veya w) ile çağrı yığınına bakın.

Temel pdb komutları

• b veya break: breakpoint ekle (ör. b 12).
• c: devam et (continue).
• n: sonraki satıra geç (next).
• s: fonksiyon içine gir (step).
• l: mevcut kodu listeler (list).
• p: ifadeyi yazdır (print).
• where veya w: stack trace.

Log seviyeleri: ne zaman log, ne zaman breakpoint?

Genelde basit akışlar veya uzun süreli izleme için log kullanılır; etkileşimli adımlama, karmaşık hataların kök nedenini bulmak için breakpoint tercih edilir. Aşağıda hem JS hem Python için temel uygulamalar yer alır.

JavaScript

console.debug, console.info, console.warn, console.error gibi yöntemleri anlamlı seviyelerde kullanın. Örneğin:
console.debug('değer', someVar);

Python

Python'un logging modülü ile seviyeleri kullanın: DEBUG, INFO, WARNING, ERROR, CRITICAL. Örnek başlangıç:

import logging
logging.basicConfig(level=logging.DEBUG)
logging.debug('debug mesajı: %s', degisken)

Pratik öneriler

• Geliştirme sırasında DEBUG seviyesini kullanın; production için INFO veya WARNING seviyesini tercih edin.
• Çok sık tekrarlanan log'lar performansı etkileyebilir; gerekli detay seviyesini ayarlayın.

Hızlı kontrol listesi (Checklist)

• Hatanın yeniden üretilebilir küçük bir test case'ini oluşturun.
• Tarayıcıda doğru dosyaya breakpoint koyduğunuzdan ve source map varsa etkin olduğundan emin olun.
• Console çıktıları ile temel verileri doğrulayın.
• Karmaşık durumlarda conditional breakpoint kullanın.
• Python için pdb.set_trace() veya python -m pdb ile yürütmeyi durdurun ve stack'i inceleyin.
• Gerekirse log seviyelerini geçici olarak DEBUG yapın, sonra geri alın.
• Asenkron problemler için event listener breakpoint veya network panelini kontrol edin.

Yaygın sorunlar ve çözüm yolları

• Breakpoint çalışmıyor: Transpile edilmiş/ minify edilmiş dosyada çalışıyor olabilirsiniz; source map kontrolü ve doğru dosya seçimi gerekir.
• Asenkron akışlarda takip zor: Event listener breakpoints ve network tabı kullanarak tetikleyicileri yakalayın.
• pdb durmuyor: Kod farklı bir süreçte veya iş parçacığında çalışıyor olabilir; multi-process/ multiprocessing durumlarında farklı hata ayıklama yaklaşımları gerekebilir.

Sonuç ve ileri okuma

Bu rehber, günlük geliştirme sırasında Chrome DevTools ve Python pdb ile daha hızlı sorun çözme için pratik adımlar sundu. Özetle:

• Basit takipler için log kullanın, karmaşık durumlarda breakpoint ve adım adım inceleme tercih edin.
• DevTools ve pdb komutlarına hakim olmak hata çözme süresini kısaltır.
• Kaynaklar ve sürüm farklılıkları için resmi dokümanları kontrol edin.

Daha detaylı bilgi için resmi kılavuzlar: DevTools (Microsoft Learn) ve Python Debugging and Profiling (docs.python.org).