Chrome ile Hata Ayıklama

Daha karmaşık kodlara geçmeden, hata ayıklama hakkında konuşmamız gerekmekte.

Çoğu modern tarayıcı “hata ayıklama”(debugging) özelliğine sahiptir – bu özel arayüz kod yazarken hata bulunmasını ve düzeltilmesini kolaylaştırır.

Geliştirici özellikleri en iyi olan tarayıcı Chrome olduğundan bu tarayıcı ile çalışacağız.

“Kaynak” paneli

Şu anda sizin kullandığınız Chrome biraz farklı olabilir. Fakat bu panel kesinlikle orada biryerde olmalı

Örnek Sayfayı Chrome ile açın.
Geliştirici araçlarını F12 (Mac: Cmd+Opt+I) ile açabilirsiniz.
kaynak panelini seçin.

Eğer ilk defa bu işlemi yapıyorsanız görmeniz gereken ekran şudur:

Sol tarafta bulunan açma kapama butonu size dosyaları gösteren bir tab açar.

Bu panelde hello.js i seçtiğinizde aşağıdaki gibi bir ekran görmeniz gerekir.

Bu bölüm üçe ayrılmıştır:

Dosya Gezgini: Html, javascript, css ve diğer dosyalar görseller de dahil olmak üzere açılan sayfaya ait olan kaynakları gösterir. Chrome eklentileri de burada yer alabilir.
Kod Editörü burası ise kaynak kodu gösterir.
Bilgi ve kontrol bölgesi burada ise hata ayıklama yapılır.

Şimdi geliştirici araçlarının sol köşesinde bulunan açma kapama bölümünü kullanarak kendinize biraz yer açabilirsiniz.

Konsol

Eğer Esc tuşuna basarsanız altta konsol açılır. Buraya komutları yazıp Enter ile çalıştırabilirsiniz.

Komut çalıştıktan sonra sonucunu hemen altında gösterir.

Örneğin burada 1+2 3 çıktısını verir. hello("debugger") dediğinizde hiçbir şey bulamadığından undefined döndürür.

Kesme Noktası

Örnek Kod içerisinde ne olduğunu incelenecek olursa. hello.js içerisinde 4. satıra tıklayın. Evet 4 e tıklayın koda değil.

Tebrikler artık ilk kesme noktanızı oluşturdunuz. Lütfen 8 e de tıklayın.

Aşağıdaki gibi görünmeli. (tıkladığınız yerler mavi olmalı)

kesme noktası JavaScript çalışırken çalışmasını o noktada durdurmasını sağlar.

Kod durdurulduğunda, o anki değişken değerlerini inceleyebilir veya konsoldan kod çalıştırabilirsiniz. Diğer bir deyişle hata ayıklayabilirsiniz

Oluşturulan bu kesme noktalarını sağ taraftaki panelde list halinde görmek mümkündür. Bu farklı dosyalarda eğer kesme noktaları varsa bunları görme açısından yararlı bir özelliktir. Eğer birçok dosyada kesme noktası varsa bu panel vasıtasıyla:

İstenilen herhangi bir kesme noktasına doğrudan üstüne tıklayarak gidilebilir.
Geçici olarak kesme noklarını devre dışı bırakılabilir.
Sağ tıklayıp Sil’e tıkladığınızda bu kesme noktalarını silebilirsiniz.

Satır sayılarının yazıldığı yere sağ tıklayarak Koşullu Kesme Noktası oluşturabilirsiniz. Eğer ifadeniz doğruysa bu kesme noktası çalışır ve JavaScript çalışması durur.

Belirli değişken değerlerine veya parametre değerlerine göre çalışma durdurulmak istendiğinde yararlı bir özelliktir.

Debugger komutu

Ayrıca debugger kodu ile de hata ayıklama işlemini yapmak mümkündür.

          function merhaba(adi) {
  let selam = `Merhaba, ${adi}!`;

  debugger;  // <-- hata ayıklama çalışır

  say(selam);
}
        

Bu kod, siz editörde kod yazarken tekrar tarayıcıya geçip, kodu bulup kesme noktası koyma sürecini ortadan kaldırıyor.

Dur ve ne olduğuna bak

Yaptığımız örnekte merhaba() sayfa yüklenirken çalışmaktadır. Bundan dolayı hata ayıklayıcıyı çalıştırmanın en kolay yolu sayfayı yenilemektir. Bunun için F5 (Windows, Linux) veya Cmd+R ile sayfanın yenileyiniz.

Kesme noktasını kodda belirlediğinizden dolayı 4. satırda JavaScript çalışmayı durduracaktır.

Lütfen bilgilerin görüneceği dropdownları sağ panelden açınız. Bu bölümler oklar ile gösterilmiştir. Bu bölümler kesme anındaki değişkenlerin değerleri ve kod durumunu incelemeye yarar.

Watch – herhangi bir ifadenin o anki değerini gösterir. + işaretine basarak ifade girebilirsiniz. Bu ifadenin değerini kod ayıklayıcı her halükarda gösterir. Kod çalışırken bu değerleri her adımda kontrol eder ve sonucunu yazar.
Call Stack – İç içe çağrı zincirlerini gösterir.

Şu anda hata ayıklayıcı merhaba() fonksiyonunun içindedir ve index.html tarafından çağırılmıştır. Eğer yığın(stack) bölgesine dikkat ederseniz fonksiyona girdiğinde nereden çağırıldığını gösterir. ( herhangi bir fonksiyondan çağırılmadığından dolayı “anonymous” olarak göreceksiniz)

Eğer yığın maddesine tıklayacak olursanız hangi fonksiyondan çağırıldığını görebilirsiniz.
Scope – kesme anında var olan değişkenlerin değerlerini gösterir

Local yerel değişken değerlerini gösterir. Ayrıca değerlerini kodun sağ tarafında vurgulanmış şekilde de görebilirsiniz.

Global global değişkenler. Yani fonksiyon dışında tanımlanmış değerleri görebilirsiniz.

Bunların yanında this anahtar kelimesi de vardır. Fakat bu konu üzerinden geçmedik.

Çalışma izini sürme

Artık iz sürme safhasına geçebilirsiniz.

Sağ panelin üstünde sadece bu işe has butonlar bulunmaktadır.

– çalışmaya devam et, F8.

Çalışmaya devam edilmesini sağlar. Eğer ayrı bir kesme noktası yoksa çalışma kod bitene kadar devam eder.

Üzerine bir defa tıkladığınızda aşağıdaki gibi olur.

Çalışmaya devam edildi, yaz() fonksiyonunun içerisinde tekrar durdu. Dikkat ederseniz “Call stack” çağrısını bu işlem bir artırdı.

– adım at (bir sonraki komutu çalıştır), fakat fonksiyonun içine girme, F10.

Eğer buna şimdi tıklarsanız alert çalışır. Önemli olan şey alert yerine farklı bir fonksiyon da olsa çalışma bu fonksiyonun içinde ne yaptığına önem vermez ve “üstünden atlar”.

– adım at, F11.

Bir öncekinin aynısı, bir adım gider fakat bu defa eğer bir fonksiyon varsa onun “içine girer”(step into).

– içinde bulunulan fonksiyonun sonuna kadar devam et, Shift+F11.

Çalışma içinde bulunan fonksiyonun sonuna gelir ve orada durur.Yanlışlıkla iç içe çağrının içine girilirse çıkmak için kullanışlı bir özelliktir.,

– Tüm kesme noktalarını etkinleştirme/devre dışı bırakma.

– Hata olduğu anda otomatik olarak durdurmayı açma kapama butonu: Etkinleştirildiğinde, kodda herhangi bir hata olduğunda çalışma otomatik olarak durdurulur. Bu noktada analizlerinizi yapabilirsiniz. Eğer hata varsa hata ayıklama ekranını açabilir ve bu özelliği etkinleştirerek hatanın nerede olduğunu bulabilirsiniz.

Satır numaralarına sağ tıklayıp “Buradan devam et” özelliği ile kodu bir kaç adım ileriden devam etmesini sağlayabilirsiniz. Böylece yeniden bir kesme noktası oluşturmanıza gerek kalmaz.

Loglama

Konsola basit bir şey yazdıracağınız zaman console.log fonksiyonunu kullanabilirsiniz. Aşağıdaki örnekte ekrana 0 ile 4 arasındaki değerler yazılır.

// çalışmasını görmek için lütfen geliştirici konsolunu açınız.
for (let i = 0; i < 5; i++) {
  console.log("deger", i);
}

Normal kullanıcı bu çıktıyı ekranda göremez, bunun için geliştirici konsoluna girmesi gerekir.

Eğer kodunuzun içerisinde yeterli derecede log varsa hata ayıklamanıza gerek yoktur.

Özet

Bahsettiğimiz gibi çalışan kodu durdurmanın üç farklı yönü vardır. Bunlar:

Kesme noktası ile durdurma
debugger kelimesi ile durdurma
Eğer hata olduğunda aç/kapa butonu aktifse çalışmada hata olduğunda durdurma

Bunların sonucunda çalışmada ne gibi hatalar olduğunu görebilirsiniz.

Bunlara ek olarak https://developers.google.com/web/tools/chrome-devtools adresinden daha geniş ve yeni bilgilere ulaşabilirsiniz.

Bu bölümdeki bilgiler sizin hata ayıklama işlemine başlamanızda yardımcı olacaktır. Fakat tarayıcı ile alakalı çok fazla işlem yapıyorsanız bu durumda geliştirici derinlemesine incelemeniz gerekmektedir.

Tabi bunun yanında deneme yanılma yöntemi ile de geliştirici araçlarının özelliklerini keşfedebilirsiniz. Unutmayın sağ tıklayarak farklı bölgelerde farklı fonksiyonları görebilirsiniz.