Bu yazımda JavaScript’te hata ayıklama nasıl yapılır? Oluşan hataları tespit edebilmek için hangi anahtar kelimeyi kullanmamız gerekiyor? vb. soruların cevaplarını öğreneceğiz.
Her yeni bilgisayar kodu yazdığınızda işin doğası gereği bazı hatalar meydana gelebilir. Bu hataları genellikle iki başlık altında toplarız. Bunlar:
- Söz dizimi hataları
- Mantıksal hatalar
Bu hataların birçoğunun bulunması zordur. Çünkü, genellikle yazdığımız programlarda oluşan hataların birçoğunda herhangi bir hata mesajı almayız. Bu yüzden hatanın nereden kaynaklandığını bulmak da o ölçüde zorlaşıyor.
Ancak neyse ki, tüm modern tarayıcılarda yerleşik bir JavaScript hata ayıklayıcı vardır.
JavaScript Hata Ayıklama
JavaScript’te bulunan debugger anahtar kelimesi ile kodlarımızın içerisinde kesme noktaları oluşturabilir ve tarayıcılarda bulunan yerleşik hata ayıklayıcılar ile kodlarımızı adım adım inceleyebiliriz. Böylece oluşan hataları nokta atışı tespit edebiliriz.
Şimdi çok basit bir örnek üzerinden konuyu daha iyi anlamaya çalışalım.
Bunun için ilk olarak index.html sayfası oluşturup script etiketleri içerisine bazı JavaScript kodları yazıyorum.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript Hata Ayıklama</title> </head> <body> <script> var sayi1 = 4; var sayi2 = 8; console.log(sayi1 + sayi2); </script> </body> </html> |
Oluşturduğumuz index.html sayfasını tarayıcıda açıyorum ve fare ile sağ tıklayıp İncele seçeneğine tıklıyorum.
Açılan pencerede Console sekmesinden yazdığımız JavaScript kodlarının çıktısını görebiliyoruz.
Eğer kodlarımızda bir hata varsa ve adım adım inceleyerek hatanın nereden kaynaklandığını bulmak istiyorsak debugger anahtar kelimesini kullanabiliriz.
Yukarıda yazdığımız kodları şimdi de debugger anahtar kelimesini ekleyerek çalıştıralım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript Hata Ayıklama</title> </head> <body> <script> debugger; var sayi1 = 4; var sayi2 = 8; console.log(sayi1 + sayi2); </script> </body> </html> |
Yine index.html sayfasını tarayıcıda açıyorum ve fare ile sağ tıklayıp İncele seçeneğine tıklıyorum.
Şuan sayfayı yenilediğimde aşağıdaki resimde gördüğünüz gibi bir ekran karşımıza çıkacaktır.
debugger anahtar kelimesini hangi satırlarda kullandıysak JavaScript kodları yürütülürken o satırlarda yürütme durdurulur.
Yürütme durdurulduktan sonra Paused in debugger kısmında en sağda bulunan ikona tıklayarak kodlarımızı Sources sekmesinden adım adım inceleyebiliriz. Böylece oluşan hataların hangi adımdan kaynaklandığını daha kolay tespit edebiliriz.
Gördüğünüz gibi ikona her tıkladığımda kodlar satır satır yürütülüyor. Bir yandan kodları bu şekilde çalıştırırken bir yandan da Console sekmesinden sonuçları incelerseniz hataları tespit etmek ciddi anlamda kolaylaşabilir.
Umarım “JavaScript Hata Ayıklama – debugger Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
JavaScript throw ve try-catch Kullanımı
JavaScript use strict Nedir? Neden Kullanılır?
Yeni bir yazımda görüşmek üzere.
