DevTools ile JavaScript Debug
Merhaba !
Yeni bir JavaScript geliştiricisiyseniz, yazdığınız kodda çıkacak olan hataları nasıl çözeceğiniz konusunda zorlanabilirsiniz. İlk zamanlar bende birçoğumuz gibi alert(); yada console.log(); kullanarak hataları çözmeye çalışırdım. Değişkenleri konsola yazdırıp doğru mu tanımlanıyor gibisinden sürekli kontrol edip ardından bu log'ları koddan temizlerdim. Bu cazip gelebilir, fakat çok daha sağlıklı ve mantıklı bir yol var; JavaScript kodunu debug yapmak !
Bu makale, doğru yolla koddan hata ayıklamakla ilgilidir. Google Chrome DevTools'u kullanmaya başlayacak yada daha hakim olacaksınız.
Hatalı Bir Kod
Öncelikle şunu bilmemiz gerekiyor, hata kötü bir şey değildir. Hata bizleri geliştirir, farklı bakış açıları kazandırır. Bu hatalarımızdan tecrübe edinip, daha sonraki zamanlarda yazdığımız kodda bu tecrübelerimiz ile daha temiz, düzgün kod yazmalıyız.
İlk olarak, demo olarak Google'ın bir linkini kulanalım, yeni sekmede açarak aşağıdaki adımları site üzerinde test edelim. Test linkini aç
Ekranda 2 adet input bulunmakta, alttaki butona basıldığı takdirde bu iki rakamın toplamını yazdırmak istiyoruz.
Number1 yazan yere 3 yazalım, Number2 yazan yere 7 yazalım. Alttaki butona tıkladığımız ise şöyle bir çıktı alacağız.
3 + 7 = 37
Fakat bu sonuç yanlış, sonucun 10 olması gerekirdi. Peki hatamız nerede, nasıl test etmeliyiz?
Breakpoint Kullanmak
Google Chrome'un DevTools aracı, frontend geliştiriciler için büyük bir nimet. JavaScript kodumuzu debug ederek aşama aşama tüm değişkenlerin hangi değerleri aldığını görebiliriz.
Üstte toplama işleminin hatalı sonuç verdiğini görmüştük. Sorunu çözmek için ilk olarak DevTools ekranını açalım. F12 yada CTRL + SHIFT + I ile DevTools'u açabiliriz. Ardından Sources tab'ına tıklayalım.
Ardından Mouse > Click kısmını seçili hale getirelim. Bu, bir click olayını dinlemeye alır. Kodda bir click işlemi gerçekleştiği anda debugger devreye girecek ve ilk çalışan kod satırı vurgulanır. Ekranda "Paused in debugger" yazısı belirecek ve yanında iki buton bulunacak. İlk buton bir sonraki breakpoint'e gider, diğer buton ise adım adım kodu işler.
Değişkenleri Kontrol Etmek
Bir kod satırına breakpoint koymak için satır numarasına tıklamak yeterlidir. Örnek olarak 32. satıra bir breakpoint koyalım. F8 butonu ile debug işlemine devam ettiğimizde updateLabel() fonksiyonumuzun içerisindeki değişkenlerin hangi değerleri aldığını görebiliriz. Ayrıca değişkenlerin üzerine gelerekte detaylı bilgiye erişebiliriz.
Görüldüğü üzere addend1 ve addend2 değişkenlerinin 3 ve 7 değerlerini aldı, fakat sum değişkeni 37 değerini aldı. ESC tuşuna basarak konsol ekranını açalım ve typeof addend1, typeof sum yazarak bu değişkenlerin string tipinde olduğnu görebiliriz. 2 değişkende string olarak alındığı için toplandığında rakamların yan yana gelerek 3+7=37 sonucunu vermesi gayet doğal. Değerleri integer'a çevirerek, istediğimiz sonuca ulaşabiliriz.
var sum = parseInt(addend1) + parseInt(addend2);Sonuç
Google DevTools'a hakim olmak ve debug yapmaya alışmak sizi daha profesyonel yapacaktır. Karşılaştığınız hataları çözümlemede daha kısa yollardan çözüme ulaşabileceksiniz. Daha önce kullanmadıysanız, konsol ve debugger'ı sürekli kullanmayı alışkanlık haline getirmenizi tavsiye ederim; iyi kodlamalar !