𝗕𝗶𝗿 𝗞ı𝗱𝗲𝗺𝗹𝗶 𝗬𝗮𝘇ı𝗹ı𝗺𝗰ı 𝗚𝗶𝗯𝗶 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗛𝗮𝘁𝗮 𝗔𝘆ı𝗸𝗹𝗮𝗺𝗮 𝗡𝗮𝘀ı𝗹 𝗬𝗮𝗽ı𝗹ı𝗿
Her şey için console.log kullanmayı bırakın. Her hafta saatlerinizi boşa harcıyorsunuz.
8 yılımı canlı ortam (production) sorunlarını çözerek geçirdim. Bu iş akışı, hata ayıklama süresini %60 oranında azaltır.
| Araç | Kullanım Durumu | Tasarruf Edilen Süre |
|---|---|---|
| Chrome DevTools Sources | Adım adım hata ayıklama | %40 |
| Conditional Breakpoints | Döngülerdeki hataları daraltma | %25 |
| Performance Panel | Rendering darboğazlarını bulma | %35 |
| Network Panel | API zamanlama sorunları | %30 |
| Console.assert | Mantık hatalarını erkenden yakalama | %15 |
Her yere log serpiştirmeyi bırakın. Bunun yerine şu yöntemleri kullanın.
Koşullu Kesme Noktaları (Conditional Breakpoints) Kullanın DevTools Sources panelini açın. Bir kesme noktası koymak için bir satır numarasına tıklayın. Sağ tıklayın ve "Edit breakpoint" seçeneğini seçin. Bir koşul ekleyin. Hata ayıklayıcı (debugger), yalnızca koşulunuz doğru olduğunda durur. Bu, büyük döngülerde saatlerce vakit kazanmanızı sağlar.
Çağrı Yığınını (Call Stack) İnceleyin Hata ayıklayıcı durduğunda Call Stack paneline bakın. Hata ile sonuçlanan yolu gösterir. Bir çerçeveye (frame) sağ tıklayın ve kaydetmek için "Copy stack trace" seçeneğini seçin.
Log Noktaları (Log Points) Kullanın Kodu durdurmadan çıktı almak istiyorsanız Log points kullanın. Bir satır numarasına sağ tıklayın ve "Add log point" seçeneğini seçin. Bu, kaynak kodunuzu değiştirmez. DevTools'u kapattığınızda kaybolur.
Performance Paneli ile Yavaş Uygulamaları Düzeltin Performance sekmesini açın. "Record" butonuna tıklayın. Sayfanızı 5 saniye boyunca kullanın. Kaydı durdurun. Main thread üzerinde 50ms'den uzun süren görevleri (long tasks) arayın. Bu, yerleşim (layout) ve boyama (painting) sorunlarını ortaya çıkarır.
Network Panelini İnceleyin Waterfall görünümünü kontrol edin. Kırmızı veya mor çubuklar, engellenen istekler (blocked requests) anlamına gelir. Büyük boşluklar, JavaScript'in ana iş parçacığını (main thread) engellediği anlamına gelir. Bir isteğe sağ tıklayın ve API sorunlarını terminalinizde test etmek için "Copy as cURL" seçeneğini seçin.
Hata ayıklama kontrol listeniz:
- Koşullu bir kesme noktası belirleyin
- Yürütme yolu için Call Stack'i kontrol edin
- Yerel değişkenler için Scope panelini kullanın
- Değerleri izlemek için bir log noktası ekleyin
- Zamanlama sorunları için bir Performance profili kaydedin
- API sorunları için Network panelini kontrol edin
Bu iş akışında ustalaşmak iki hafta sürer. Kariyeriniz için en iyi verimlilik yükseltmesidir. Tarayıcınızda bu araçlar zaten mevcut. Onları kullanın.
Kaynak: https://dev.to/kui_luo/how-to-debug-javascript-like-a-senior-developer-in-2025-3d0p