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:

1. 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.
2. Kod Editörü burası ise kaynak kodu gösterir.
3. 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.

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.

1. 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.

2. 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.

3. 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.

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:

1. Kesme noktası ile durdurma
2. debugger kelimesi ile durdurma
3. 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.