Your Console Is Lying To You
Tarayıcı DevTools araçlarınız hata ayıklama (debugging) sırasında sizi yanıltabilir. Bozuk değil; mükemmel doğruluk için değil, hız için optimize edilmiştir.
İşte neden her zaman console.log'a güvenemeyeceğinizin nedenleri:
• Lazy Evaluation Bir nesneyi (object) logladığınızda, tarayıcı onu hemen kopyalamaz. Canlı bir referans saklar. Tarayıcı, özellikleri yalnızca genişletmek için oka tıkladığınızda okur. Eğer kodunuz siz tıklamadan önce o nesneyi değiştirirse, eski değeri değil, yeni değeri görürsünüz.
• The Heisenbug Effect Bir console.log eklemek aslında hataları gizleyebilir. Loglama işlemi zaman ve kaynak gerektirir. Hızlı çalışan kodlarda, bu küçük gecikme uygulamanızın zamanlamasını değiştirebilir. Bu durum, siz izlerken yarış durumlarının (race conditions) oluşmasını engelleyerek hatanın ortadan kaybolmasına neden olabilir.
• React State Traps Bir setCount çağrısından hemen sonra state'i loglamak eski değeri gösterir. Bu, closure'lar ve React'in güncellemeleri nasıl planladığı nedeniyle olur. Logladığınız değer bir sonraki render'a değil, mevcut render'a aittir.
• Source Map Errors Production ortamında kodunuz küçültülür (minified) ve paketlenir (bundled). Eğer source map'leriniz eski veya hatalıysa, konsol sizi yanlış kod satırına yönlendirecektir. Hata gerçektir ancak konumu yanlıştır.
Nasıl daha iyi hata ayıklanır:
Anlık görüntüler (snapshot) almak için structuredClone kullanın Bir nesneyi tam olarak şu anki haliyle görmek istiyorsanız şunu kullanın:
const snap = structuredClone(obj)console.log(snap)Büyük nesneler yerine primitive değerleri loglayın ID'leri, zaman damgalarını (timestamps) veya durum dizelerini (status strings) loglayın. Bu, lazy evaluation riskini ve performans kayıplarını azaltır.
Debugger kullanın Yürütmeyi duraklatmak için breakpoint'ler kullanın. Bu, kodunuzun zamanlamasını değiştirmeden gerçek durumu ve çağrı yığınını (call stack) incelemenize olanak tanır.
Framework DevTools araçlarını kullanın React veya Vue kullanıyorsanız, onlara özel DevTools araçlarını kullanın. Bunlar, yaşam döngüsü (lifecycle) ve render aşamalarını loglardan daha doğru bir şekilde gösterir.
Konsol, hızlı keşifler için harika bir araçtır. Onu nihai gerçeklik kaynağınız olarak kullanmayın.
Source: https://dev.to/gkoos/your-console-is-lying-to-you-3dlc