JavaScript Hata Ayıklama (Debugger)
Tabiri caizse, her yazılımcının karşılaştığı bir durum vardır: kodunuz çalışmıyor ve hatayı nerede yaptığınızı bulmanız gerekiyor. Neyse ki JavaScript, hata ayıklama işlemi için birkaç araç sunar. Bunlardan biri de debugger ifadesidir. Bu ifade, kodunuzu hata ayıklama moduna alarak, ilgili satırda duraklatır ve hata ayıklama işlemini kolaylaştırır.
JavaScript Hata Ayıklama
JavaScript’te debugger ifadesi, kodunuzun çalışmasını durdurarak, ilgili satırda bir “debugger” noktası oluşturmanıza olanak tanır. Bu ifade, kodunuzun belirli bir noktasındaki değişken değerlerini, hata ayıklama bilgilerini ve diğer verileri incelemenize yardım eder.
debugger ifadesini kullanarak hata ayıklama yapmak için aşağıdaki adımları izleyebilirsiniz:
- Kodunuzun hata ayıklamasını yapmak istediğiniz noktasına
debugger;ifadesini ekleyin. - Tarayıcınızın geliştirici araçlarını açın ve ilgili sayfayı yükleyin.
- Tarayıcınızdaki geliştirici araçlarında “Debugger” sekmesine geçin.
- Kodunuzun çalışması durduğunda, geliştirici araçlarındaki Sources (Kaynaklar) bölümünden kodunuzun ilgili dosyasını seçin.
debugger;ifadesinin olduğu satıra geldiğinizde, kodunuz duracak ve geliştirici araçlarına geri döneceksiniz.- Geliştirici araçlarını kullanarak, değişken değerlerini, fonksiyon çağrılarını ve diğer hata ayıklama bilgilerini inceleyebilirsiniz.
- Hata ayıklamanız bittiğinde, geliştirici araçlarından çıkarak kodunuzun kalan kısmının çalışmasını sağlayabilirsiniz.
|
1 2 3 4 5 6 7 8 |
function addNumbers(num1, num2) { debugger; const sum = num1 + num2; return sum; } const result = addNumbers(5, 10); console.log(result); |
Yukarıdaki örneğimizde, debugger; ifadesi, kodun addNumbers fonksiyonuna girdiğinde çalışacak ve hata ayıklama işlemini başlatacaktır.
Bu kodu tarayıcınızdaki geliştirici araçlarından açıp “Debugger” sekmesine geçtiğinizde, kodun debugger; ifadesine geldiğinde duracağını göreceksiniz. Bu noktada, geliştirici araçları, değişken değerlerini, fonksiyon çağrılarını ve diğer hata ayıklama bilgilerini inceleyebilmeniz için size özel bir arayüz sağlayacaktır.
Bunu yapabilmek için index.html sayfasını kaydedip tarayıcıda açıyorum. Ardından fare ile sağ tıklayıp İncele seçeneğine tıklıyorum. İngilizce kullanıyorsanız “Paused in debugger”, Türkçe kullanıyorsanız “Hata ayıklayıcı içinde duraklatıldı” yazısının en sağında bulunan ikona tıklayarak kodlarımızı Sources (Kaynaklar) sekmesinden adım adım inceleyebiliriz:
Kodları bu şekilde çalıştırarak, kodunuzun çalışma mantığını edinebilir, hata ayıklama işlemini kolaylaştırabilirsiniz.