JavaScript hatalarını ayıkla

Kayce Basques

Sofia Emelianova

Bu eğitimde, DevTools'ta JavaScript sorunlarını gidermeyle ilgili temel iş akışı açıklanmaktadır. Devamını okuyun veya bu eğitimle ilgili videoyu izleyin.

Hatayı yeniden oluşturma

Hata ayıklamanın ilk adımı, hatayı her zaman tekrar oluşturacak bir dizi işlem bulmaktır.

1. Bu demoyu yeni bir sekmede açın.
2. 1. Sayı kutusuna 5 girin.
3. 2. Sayı kutusuna 1 yazın.
4. 1. Numarayı ve 2. Numarayı Ekle'yi tıklayın. Düğmenin altında 5 + 1 = 51 etiketi bulunur. Sonuç 6 olmalıdır. Düzelteceğiniz hata budur.

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

Kaynaklar paneli kullanıcı arayüzünü tanıma

Geliştirici Araçları, CSS'yi değiştirme, sayfa yükleme performansını profilleme ve ağ isteklerini izleme gibi farklı görevler için birçok farklı araç sağlar. JavaScript'de hata ayıklama işlemini Kaynaklar panelinde yaparsınız.

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

   

Kaynaklar panelinde üç bölüm bulunur:

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

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

   DevTools pencereniz genişse Hata Ayıklama Aracı varsayılan olarak Kod Düzenleyici'nin sağındadır. Bu durumda, Kapsam ve İzle sekmeleri, Duraklatma noktaları, Çağrı yığınları ve diğer sekmeleri daraltılabilir bölümler olarak birleştirir.

Kesme noktasıyla kodu duraklatma

Bu tür bir sorunun hata ayıklama işleminde yaygın olarak kullanılan bir yöntem, komut dosyası yürütülü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 halledebilir ancak kesme noktaları daha hızlı sonuç verir. Bir kesme noktası, kodunuzu yürütülmesinin ortasında duraklatmanıza ve o andaki tüm değerleri incelemenize olanak tanır. Kesme noktalarının console.log() yöntemine göre birkaç avantajı vardır:

• console.log() ile, mesajları Konsol'da görmek için kaynak kodu manuel olarak açmanız, ilgili kodu bulmanız, console.log() ifadelerini eklemeniz ve ardından sayfayı yeniden yüklemeniz gerekir. Kesme noktaları sayesinde, kodun nasıl yapılandırıldığını bilmeden bile ilgili kodda duraklatabilirsiniz.
• console.log() ifadenizde, incelemek istediğiniz her değeri açıkça belirtmeniz gerekir. DevTools, kesme noktaları sayesinde o anda tüm değişkenlerin değerlerini gösterir. Bazen, kodunuzu etkileyen ve farkında olmadığınız değişkenler olabilir.

Özetlemek gerekirse, kesme noktaları, console.log() yöntemine kıyasla hataları daha hızlı bulup düzeltmenize yardımcı olabilir.

Bir adım geri çekilip uygulamanın nasıl çalıştığını düşünürseniz yanlış toplamın (5 + 1 = 51), 1. ve 2. Sayıları Ekle düğmesiyle ilişkili click etkinlik dinleyicisinde hesaplandığını tahmin edebilirsiniz. Bu nedenle, click dinleyicisinin yürütüldüğü sırada kodu duraklatmanız önerilir. Etkinlik İşleyici Ayrılma Noktaları tam da bunu yapmanıza olanak tanır:

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

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

   

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

   function onClick() {
   

   Farklı bir kod satırında duraklattıysanız doğru satırda duraklatılana kadar devam Komut Dosyası Yürütme'yi Devam Et'e basın.

Etkinlik İşleyici Ayrılma Noktaları, DevTools'ta bulunan birçok ayrılma noktası türünden yalnızca biridir. Her tür, farklı senaryolarda en hızlı şekilde hata ayıklamanıza yardımcı olacağından tüm farklı türleri incelemeye değer. Her türün ne zaman ve nasıl kullanılacağını öğrenmek için Kodu Duraklatma Noktalarıyla Duraklatma başlıklı makaleyi inceleyin.

Kodu adım adım inceleme

Hataların yaygın nedenlerinden biri, komut dosyasının yanlış sırada yürütülmesidir. Kodunuzu adım adım inceleyerek kodunuzun yürütülmesini tek satırda inceleyebilir ve beklenenden farklı bir sırada yürütüldüğü tam yeri anlayabilirsiniz. Hemen deneyin:

1. onClick() işlevinin yürütülmesini satır satır adım adım incelemek için DevTools'un Kaynaklar panelinde step_into Sıradaki işlev çağrısında durakla'yı tıklayın. Geliştirici Araçları aşağıdaki kod satırını vurgular:

   if (inputsAreEmpty()) {
   

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

   Geliştirici Araçları, inputsAreEmpty() içine girmeden inputsAreEmpty()'ü yürütür. Geliştirici Araçları'nın birkaç satır kodu atladığını fark edin. Bunun nedeni, inputsAreEmpty() değerinin yanlış olarak değerlendirilmesi ve bu nedenle if ifadesinin kod bloğunun yürütülmemesidir.

Kodda adımlama işleminin temel fikri budur. get-started.js'teki koda bakarsanız hatanın muhtemelen updateLabel() işlevinde olduğunu görebilirsiniz. Her kod satırını adım adım ilerlemek yerine, kodu hatanın olası konumuna daha yakın bir yerde duraklatmak için başka bir tür kesme noktası kullanabilirsiniz.

Kod satırında durma noktası ayarlama

Kod satırı kesme noktaları en yaygın kesme noktası türüdür. Duraklatmak istediğiniz belirli bir kod satırı varsa kod satırı kesme noktası kullanın:

1. updateLabel() dosyasının son satırına bakın:

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

2. Kodun solunda, bu kod satırının satır numarasını (32) görebilirsiniz. 32'yi tıklayın. DevTools, 32 değerinin üzerine mavi bir simge yerleştirir. Bu, bu satırda kod satırında bir durak noktası olduğu anlamına gelir. DevTools artık bu kod satırı çalıştırılmadan önce her zaman duraklatılır.

3. Devam ettir Komut dosyası yürütmeyi devam ettir'i tıklayın. Komut dosyası, 32. satıra ulaşana kadar yürütülmeye devam eder. DevTools, 29., 30. ve 31. satırlarda addend1, addend2 ve sum değişkenlerinin değerlerini, tanımlarının yanında satır içi olarak gösterir.

Bu örnekte DevTools, 32. satırdaki kod satırında duraklar.

Değişken değerlerini kontrol etme

addend1, addend2 ve sum değerleri şüpheli görünüyor. Tırnak içine alınmış olduklarından dize oldukları anlaşılır. Bu, hatanın nedenini açıklamak için iyi bir hipotezdir. Şimdi daha fazla bilgi toplama zamanı. DevTools, değişken değerlerini incelemek için birçok araç sağlar.

1. Yöntem: Kapsamı İnceleme

Bir kod satırında duraklattığınızda Kapsam sekmesi, yürütmenin bu noktasında tanımlanan yerel ve genel değişkenleri, her değişkenin değeriyle birlikte gösterir. Uygun olduğunda kapanış değişkenlerini de gösterir. Bir kod satırında duraklatılmadığınızda Kapsam sekmesi boş olur.

Değiştirmek için bir değişken değerini çift tıklayın.

2. yöntem: İzleme ifadeleri

İzle sekmesi, değişkenlerin değerlerini zaman içinde izlemenizi sağlar. İzle işlevi yalnızca değişkenlerle sınırlı değildir. Geçerli tüm JavaScript ifadelerini İzle sekmesinde saklayabilirsiniz.

Hemen deneyin:

1. İzle sekmesini tıklayın.
2. Ekle İzleme ifadesi ekle'yi tıklayın.
3. typeof sum yazın.
4. Enter tuşuna basın. DevTools'ta 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 izleme ifadesi oluşturulduktan sonra İzle sekmesi (sağ alt) gösterilmektedir.

Şüphelenildiği gibi, sum bir sayı olması gerekirken dize olarak değerlendiriliyor. Bu nedenle, hatanın nedeninin bu olduğunu doğruladınız.

3. Yöntem: Konsol

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

1. Console çekmecesi açık değilse açmak için Escape tuşuna basın. DevTools pencerenizin alt kısmında açılır.
2. Konsol'a parseInt(addend1) + parseInt(addend2) yazın. Bu ifade, addend1 ve addend2'un kapsamda olduğu bir kod satırında duraklatıldığı için çalışır.
3. Enter tuşuna basın. DevTools, ifadeyi değerlendirir ve demodan beklediğiniz sonucu olan 6 değerini yazdırır.

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

Düzeltme uygulama

Hatayı düzeltmek için bir çözüm buldunuz. Geriye kalan tek şey, kodu düzenleyerek ve demoyu yeniden çalıştırarak çözümünüzü denemektir. Düzeltmeyi uygulamak için Geliştirici Araçları'ndan çıkmanıza gerek yoktur. JavaScript kodunu doğrudan DevTools kullanıcı arayüzünde düzenleyebilirsiniz. Hemen deneyin:

1. Devam ettir Komut dosyası yürütmeyi devam ettir'i tıklayın.
2. Kod Düzenleyici'de 31. satırdaki var sum = addend1 + addend2 değerini var sum = parseInt(addend1) + parseInt(addend2) ile değiştirin.
3. Değişikliklerinizi 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 olur. Bu ayar etkinken DevTools, belirlediğiniz tüm kesme noktalarını yoksayar.
5. Demoyu farklı değerlerle deneyin. Demo artık doğru şekilde hesaplanıyor.

Sonraki adımlar

Bu eğitimde, yalnızca iki kesme noktası belirleme yöntemi gösterilmiştir. DevTools'ta aşağıdakiler de dahil olmak üzere birçok başka yöntem sunulur:

• Yalnızca belirttiğiniz koşul doğru olduğunda tetiklenen koşullu kesme noktaları.
• Yakalanan veya yakalanmayan istisnalarda kesme noktaları.
• İstekte bulunulan URL, sağladığınız bir alt diziyle eşleştiğinde tetiklenen XHR kesme noktaları.

Her türün ne zaman ve nasıl kullanılacağını öğrenmek için Kodunuzu Duraklatma Noktalarıyla Duraklatma başlıklı makaleyi inceleyin.

Bu eğitimde açıklanmayan birkaç kod adımlama denetimi vardır. Daha fazla bilgi edinmek için Kod satırını atlama başlıklı makaleyi inceleyin.