JavaScript hatalarını ayıkla

Kayce Basques

Sofia Emelianova

Bu eğitim, Geliştirici Araçları'ndaki JavaScript sorunlarını gidermek için temel iş akışını öğretir. Bu eğiticinin video sürümünü okuyun veya izleyin.

Hatayı yeniden oluşturun

Bir hatayı sürekli olarak yeniden üreten bir dizi işlem bulmak her zaman hata ayıklamanın ilk adımıdır.

1. Yeni bir sekmede bu demoyu açın.
2. 1 Numara kutusuna 5 girin.
3. 2 Numara kutusuna 1 yazın.
4. 1. ve 2. Numarayı Ekle'yi tıklayın. Düğmenin altındaki etikette 5 + 1 = 51 yazıyor. Sonuç 6 olmalıdır. Bu, düzelteceğiniz hatadır.

Bu örnekte, 5 + 1'in sonucu 51'dir. 6 olmalıdır.

Kaynak paneli kullanıcı arayüzünü tanıyın

Geliştirici Araçları; CSS'yi değiştirme, sayfa yükleme performansının profilini çıkarma ve ağ isteklerini izleme gibi farklı görevler için birçok farklı araç sağlar. Kaynaklar paneli, JavaScript'te hata ayıkladığınız yerdir.

1. Geliştirici Araçları'nı açın ve Kaynaklar paneline gidin.

   

Kaynaklar panelinde üç bölüm vardır:

1. Dosya ağacının bulunduğu Sayfa sekmesi. Sayfanın istediği her dosya burada listelenir.
2. Kod Düzenleyici bölümü. Sayfa sekmesinde bir dosya seçtikten sonra, dosyanın içeriği burada görüntülenir.

3. Hata Ayıklayıcı bölümü. Sayfanın JavaScript'ini incelemek için çeşitli araçlar.

   Geliştirici Araçları pencereniz varsayılan olarak genişse Hata Ayıklayıcı, Kod Düzenleyici'nin sağında bulunur. Bu durumda, Kapsam ve İzleme sekmeleri daraltılabilir bölümler olarak Ayrılma Noktaları, Çağrı yığını ve diğer sekmelerle birleştirilir.

Ayrılma noktası içeren kodu duraklatma

Bunun gibi bir sorun için hata ayıklamada yaygın olarak kullanılan bir yöntem, komut dosyası çalışırken değerleri incelemek için koda çok sayıda console.log() ifadesi eklemektir. Örneğin:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

console.log() yöntemi işi tamamlayabilir ancak ayırma noktaları bu işlemi daha hızlı yapabilir. Ayrılma noktası, yürütülürken kodunuzu duraklatabilmenizi ve o andaki tüm değerleri incelemenizi sağlar. Kesme noktalarının, console.log() yöntemine göre birkaç avantajı vardır:

• console.log() ile kaynak kodunu manuel olarak açmanız, ilgili kodu bulmanız, console.log() ifadelerini eklemeniz ve ardından Console'da mesajları görmek için sayfayı yeniden yüklemeniz gerekir. Ayrılma noktaları sayesinde, kodun nasıl yapılandırıldığını bile bilmeden ilgili kod üzerinde duraklayabilirsiniz.
• console.log() ifadelerinizde, incelemek istediğiniz her değeri açıkça belirtmeniz gerekir. Geliştirici Araçları, kesme noktaları sayesinde tüm değişkenlerin o andaki değerlerini gösterir. Bazen kodunuzu etkileyen, sizin bile farkında olmadığınız değişkenler olur.

Kısacası, ayrılma noktaları ile hataları console.log() yönteminden daha hızlı bir şekilde bulup düzeltebilirsiniz.

Bir adım geri çekilip uygulamanın nasıl çalıştığını düşünürseniz yanlış toplamın (5 + 1 = 51) 1 Numarayı Ekle ve 2 Numarayı Ekle düğmesiyle ilişkilendirilmiş click etkinlik işleyicide hesaplandığına dair bilgiye dayalı bir tahminde bulunabilirsiniz. Bu nedenle, muhtemelen click işleyicisinin çalıştığı süre boyunca kodu duraklatmak isteyebilirsiniz. Etkinlik İşleyici Ayrılma Noktaları tam olarak şunları yapmanızı sağlar:

1. Hata Ayıklayıcı bölümünde, Etkinlik İşleyici Ayrılma Noktaları'nı tıklayarak bölümü genişletin. DevTools, Animasyon ve Pano gibi genişletilebilir etkinlik kategorilerinin bir listesini gösterir.
2. Fare etkinlik kategorisinin yanındaki arrow_right Genişlet'i tıklayın. Geliştirici Araçları, tıklama ve mousedown gibi fare etkinliklerinin bir listesini gösterir. Her etkinliğin yanında bir onay kutusu bulunur.

3. Tıklama onay kutusunu işaretleyin. Geliştirici Araçları artık herhangi bir click etkinlik işleyici yürütüldüğünde otomatik olarak duraklatılacak şekilde ayarlanmıştır.

   

4. Demoya geri dönün ve 1. ve 2. Numarayı Ekle'yi tekrar tıklayın. DevTools demoyu duraklatır ve Kaynaklar panelinde bir kod satırını vurgular. Geliştirici Araçları şu kod satırında duraklatılmalıdır:

   function onClick() {
   

   Farklı bir kod satırında duraklatıldıysanız doğru satırda duraklatılana kadar Komut Dosyası Yürütme İşlemini Devam Ettir'e devam ettir'e basın.

Etkinlik İşleyici Ayrılma Noktaları, Geliştirici Araçları'nda bulunan birçok ayrılma noktası türünden yalnızca bir tanesidir. Tüm farklı türleri keşfetmek önemlidir çünkü her tür, farklı senaryolarda mümkün olduğunca hızlı bir şekilde hata ayıklamanıza yardımcı olur. Her bir türün ne zaman ve nasıl kullanılacağını öğrenmek için Kodunuzu Kesme Noktalarıyla Duraklatma bölümünü inceleyin.

Kodu adım adım inceleyin

Hataların yaygın nedenlerinden biri, bir komut dosyasının yanlış sırada çalışmasıdır. Kodunuzda ilerlemek, her seferinde bir satır olacak şekilde kodunuzun yürütülmesini ve beklediğinizden farklı bir sırayla tam olarak nerede yürütüldüğünü anlamanızı sağlar. Hemen deneyin:

1. Geliştirici Araçları'nın Kaynaklar panelinde, her defasında bir satır olacak şekilde onClick() işlevinin yürütülmesini adım adım görmek için step_into Sonraki işlev çağrısına geç'i tıklayın. DevTools aşağıdaki kod satırını vurgular:

   if (inputsAreEmpty()) {
   

2. step_over Sonraki işlev çağrısının üzerinden geç'i tıklayın.

   Geliştirici Araçları, içine girmeden inputsAreEmpty() işlemini yürütür. Geliştirici Araçları'nın birkaç satırlık kodu nasıl atladığına dikkat edin. Bunun nedeni, inputsAreEmpty() işlevinin false (yanlış) olarak değerlendirilmesi ve dolayısıyla if ifadesinin kod bloğunun yürütülememesidir.

Kodlamayı adım adım gerçekleştirmenin temel fikri budur. get-started.js kodundaki koda bakarsanız hatanın muhtemelen updateLabel() işlevinde bir yerde olduğunu görebilirsiniz. Her kod satırını tek tek incelemek yerine, kodu hatanın olası konumuna daha yakın bir yerde duraklatmak için başka bir ayrılma noktası türü kullanabilirsiniz.

Kod satırı ayrılma noktası ayarlama

Kod satırı ayrılma noktaları, ayrılma noktasının en yaygın türüdür. Durmak istediğiniz belirli bir kod satırı olduğunda bir kod satırı ayrılma noktası kullanın:

1. updateLabel() kodundaki son satıra bakın:

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. Kodun solunda, bu kod satırının (32) satır numarasını görebilirsiniz. 32'yi tıklayın. Geliştirici Araçları, 32 simgesinin üzerine mavi bir simge ekler. Bu, bu satırda bir kod satırı ayrılma noktası olduğu anlamına gelir. Geliştirici Araçları artık bu kod satırı yürütülmeden önce her zaman duraklar.

3. Devam ettir Komut dosyası yürütülmeye devam et'i tıklayın. Komut dosyası 32. satıra ulaşana kadar çalışmaya devam eder. Geliştirici Araçları, 29, 30 ve 31. satırlarda addend1, addend2 ve sum değerlerini bildirimlerinin yanında satır içinde gösterir.

Bu örnekte, Geliştirici Araçları 32. satırdaki kod satırı ayrılma noktasında duraklar.

Değişken değerlerini kontrol edin

addend1, addend2 ve sum değerleri şüpheli görünüyor. Bunlar tırnak içine alınır, yani dize olur. Bu, hatanın nedenini açıklamak açısından iyi bir varsayımdır. Şimdi daha fazla bilgi toplama zamanı. Geliştirici Araçları, değişken değerlerini incelemek için birçok araç sunar.

1. Yöntem: Kapsamı İnceleme

Bir kod satırında duraklatıldığınızda Kapsam sekmesi, yürütme işleminin bu noktasında hangi yerel ve genel değişkenlerin tanımlandığını, her değişkenin değeriyle birlikte gösterir. Geçerli olduğunda kapatma değişkenlerini de gösterir. Bir kod satırında duraklatılmadıysanız Kapsam sekmesi boş olur.

Düzenlemek istediğiniz değişken değerini çift tıklayın.

2. Yöntem: İfadeleri izleme

İzleme sekmesi, zaman içindeki değişkenlerin değerlerini izlemenize olanak tanır. İzle bölümü yalnızca değişkenlerle sınırlı değildir. Geçerli tüm JavaScript ifadelerini İzleme sekmesinde depolayabilirsiniz.

Hemen deneyin:

1. İzle sekmesini tıklayın.
2. add İzleme ifadesi ekle'yi tıklayın.
3. typeof sum yazın.
4. Enter tuşuna basın. Geliştirici Araçları'nda typeof sum: "string" gösterilir. İki nokta üst üste işaretinin sağındaki değer, ifadenizin sonucudur.

Bu ekran görüntüsünde, typeof sum saat ifadesi oluşturulduktan sonra İzle sekmesi (sağ alt) gösterilmektedir.

Şüphelenildiği gibi, sum bir sayı olması gereken bir dize olarak değerlendiriliyor. Şimdi hatanın nedeninin bu olduğunu onayladınız.

3. Yöntem: Konsol

Console'u, console.log() mesajlarını görüntülemenin yanı sıra rastgele JavaScript ifadelerini değerlendirmek için de kullanabilirsiniz. Hata ayıklama açısından, olası hata düzeltmelerini test etmek için Console'u kullanabilirsiniz. Hemen deneyin:

1. Konsol çekmecesi açık değilse açmak için Escape tuşuna basın. Geliştirici Araçları pencerenizin en altında açılır.
2. Console'a parseInt(addend1) + parseInt(addend2) yazın. Bu ifade, addend1 ve addend2 kapsamında yer alan bir kod satırında duraklatıldığınız için işe yarar.
3. Enter tuşuna basın. DevTools ifadeyi değerlendirir ve 6 çıktısını çıkarır. Bu, demonun üretmesini beklediğiniz sonuçtur.

Bu ekran görüntüsünde, parseInt(addend1) + parseInt(addend2) değerlendirildikten sonra Konsol çekmecesi gösterilmektedir.

Düzeltmeyi uygula

Hata için bir düzeltme buldunuz. Geriye kalan tek şey kodu düzenleyip demoyu çalıştırarak düzeltmeyi denemektir. Düzeltmeyi uygulamak için Geliştirici Araçları'ndan ayrılmanız gerekmez. JavaScript kodunu doğrudan Geliştirici Araçları arayüzünde düzenleyebilirsiniz. Hemen deneyin:

1. Devam ettir Komut dosyası yürütülmeye devam et'i tıklayın.
2. Kod Düzenleyici'de, 31. satır olan var sum = addend1 + addend2'yi var sum = parseInt(addend1) + parseInt(addend2) ile değiştirin.
3. Yaptığınız değişikliği kaydetmek için Command + S (Mac) veya Control + S (Windows, Linux) tuşlarına basın.
4. label_off Kesme noktalarını devre dışı bırak'ı tıklayın. Etkin olduğunu belirtmek için rengi mavi renge döner. Bu politika ayarlanırken Geliştirici Araçları, ayarladığınız ayrılma noktalarını yoksayar.
5. Demoyu farklı değerlerle deneyin. Demo artık doğru hesaplama yapıyor.

Sonraki adımlar

Bu eğiticide, kesme noktası ayarlamanın yalnızca iki yolu gösterilmiştir. Geliştirici Araçları'nın sunduğu pek çok yöntem vardır:

• Yalnızca sağladığınız koşul doğru olduğunda tetiklenen koşullu ayrılma noktaları.
• Yakalanan veya yakalanmayan istisnalardaki ayrılma noktaları.
• İstenen URL, sağladığınız bir alt dizeyle eşleştiğinde tetiklenen XHR ayrılma noktaları.

Her bir türün ne zaman ve nasıl kullanılacağını öğrenmek için Kodunuzu Kesme Noktalarıyla Duraklatma bölümünü inceleyin.

Bu eğiticide açıklanmayan birkaç kod adımı denetimi bulunmaktadır. Daha fazla bilgi edinmek için Kod satırının üzerinden geçme bölümüne bakın.