Chrome DevTools Hata Ayıklama Rehberi

Tarayıcının içinde tam teşekküllü bir laboratuvar var. Çoğu geliştirici onun yalnızca console.log kısmını kullanıyor. Oysa chrome devtools debugging akışını öğrendiğinde, "neden çalışmıyor bu?" sorusuna dakikalar yerine saniyeler içinde cevap veriyorsun.

Paneli açmanın üç yolu var: F12, Ctrl+Shift+I (macOS'ta Cmd+Option+I) ya da sayfada sağ tık → İncele. Aşağıdaki adımları kendi projende açık bir sekmede dene; okuyarak değil, tıklayarak öğreniliyor.

JavaScript Hatalarını Bulmak: Console ve Sources

Hata ayıklamanın yüzde sekseni bu iki panelde geçer. Console olayı haber verir, Sources olayın nerede olduğunu gösterir.

Console'u gerçekten okumak

• Kırmızı satırın sağındaki dosya adı ve satır numarası tıklanabilir. Doğrudan koda atlar.
• Hatanın altındaki stack trace'i aç. En üstteki satır hatanın patladığı yer, alttakiler oraya nasıl gelindiği.
• Filtre kutusuna yazarak gürültüyü azalt. Üçüncü parti scriptlerin uyarılarını gizlemek için "Hide network" ve seviye filtrelerini kullan.
• console.log yerine bazen daha iyi seçenekler var:
  • console.table() — dizi ve nesne listelerini tablo olarak basar.
  • console.dir() — DOM elemanını HTML yerine nesne olarak gösterir.
  • console.time() / timeEnd() — iki nokta arasındaki süreyi ölçer.
  • console.trace() — o fonksiyona kimin çağırdığını dökümler.
• Console'da $0 yazarsan Elements panelinde seçili olan elemanı verir. $$('div.card') ise querySelectorAll kısayolu.

Breakpoint türlerini ayırt et

Log basmayı bırakıp kodu durdurmayı öğrendiğin gün iş hızlanır. Sources panelinde dosyayı aç, satır numarasına tıkla. Sayfa o satırda donar ve tüm değişkenleri canlı incelersin.

1. Satır breakpoint: Klasik yöntem. Şüphelendiğin satıra koy.
2. Koşullu breakpoint: Satır numarasına sağ tık → "Add conditional breakpoint". Örneğin user.id === 42 yaz; döngü sadece o durumda dursun.
3. Logpoint: Aynı menüden. Kodu durdurmadan console'a mesaj basar. Kaynak dosyayı kirletmeden log almanın en temiz yolu.
4. DOM breakpoint: Elements panelinde elemana sağ tık → "Break on" → attribute değişimi veya alt ağaç değişimi. "Bu div'i kim siliyor?" sorusunun cevabı burada.
5. Event listener breakpoint: Sources panelinin sağ sütununda. Mouse → click seçersen her tıklamada ilgili handler'da durur.
6. XHR/fetch breakpoint: URL parçası girersin, o isteği yapan kodda durur.

Durdurduktan sonra ne yapmalı

• Scope bölümünde local, closure ve global değişkenleri gör. Beklediğin değer orada mı?
• Call Stack ile geriye doğru yürü. Herhangi bir kareye tıklayıp o anki değişkenleri inceleyebilirsin.
• Watch paneline bir ifade ekle; adım attıkça değeri güncellenir.
• Adım tuşları: F8 devam et, F10 üstünden atla, F11 içine gir, Shift+F11 dışına çık.
• Kütüphane dosyalarına girip kaybolmamak için üçüncü parti scripti sağ tıkla → "Add script to ignore list".

Network Sorunları ve Performans Analizi

Kod hatasız görünüyor ama sayfa boş geliyorsa sorun genelde veri katmanında. Burada Network ve Performance panelleri devreye girer.

Network panelini teşhis aracı gibi kullan

• Paneli açıp sayfayı Ctrl+Shift+R ile önbelleksiz yenile. Yoksa bazı istekler hiç görünmez.
• Fetch/XHR filtresine geç. API çağrılarını izole edersin.
• Bir isteğe tıkla: Headers gönderilen başlıkları, Payload gövdeyi, Response ham cevabı, Timing ise sürenin nerede harcandığını gösterir.
• Status kodlarını hızlı yorumla: 401/403 yetki, 404 yanlış yol, 422 doğrulama, 500 sunucu tarafı. CORS hatası ise Console'da ayrıca belirir ve isteği tarayıcı engeller.
• İsteğe sağ tık → "Copy as cURL". Aynı çağrıyı terminalde ya da API test aracında birebir tekrarlayabilirsin; sitedeki REST API test araçları rehberi bu noktada iyi bir devam adımı.
• Throttling menüsünden "Slow 4G" seç. Yavaş bağlantıda ortaya çıkan yarış durumlarını böyle yakalarsın.

Performance kaydı almak

Performance panelinde kayıt tuşuna bas, sorunlu etkileşimi yap, durdur. Karmaşık görünen bu ekranda üç yere bak: