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. Bu eğiticinin devamını okuyun veya video sürümünü izleyin.

Hatayı yeniden oluşturun

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

DevTools, CSS 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ın yer aldığı Sayfa sekmesi. Sayfanın istediği her dosya burada listelenir.
2. Kod Düzenleyici bölümü. Sayfa sekmesinde bir dosya seçtikten sonra, söz konusu 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

Bunun gibi bir sorunda hata ayıklamak için 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şinizi tamamlayabilir ancak ayırma noktaları bu işi daha hızlı tamamlayabilir. 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, muhtemelen click işleyicisi çalıştırıldığı sırada kodu duraklatmak isteyebilirsiniz. Etkinlik İşleyici Ayrılma Noktaları tam olarak şunları yapmanızı sağlar:

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 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ı, tıklama ve fare aşağı gibi fare etkinliklerinin bir listesini gösterir. Her etkinliğin yanında bir onay kutusu bulunur.

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

   

4. Demoya geri dönün ve 1 Numarayı ve 2 Numarayı Ekle'yi tekrar 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 Duraklatma noktalarıyla kodunuzu 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. Geliştirici Araçları'nın Kaynaklar panelinde, onClick() işlevini her seferinde bir satır olacak şekilde yürütme adımına geçmek için step_into Sonraki işlev çağrısına geç'i tıklayın. Geliştirici Araçları, aşağıdaki kod satırını vurgular:

   if (inputsAreEmpty()) {
   

2. step_over Sonraki işlev çağrısına 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 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ı ayrılma noktası ayarla

Kod satırı ayrılma noktaları, en yaygın ayrılma noktası türüdür. Duraklatmak istediğiniz belirli bir kod satırı varsa bir kod satırı ayrılma 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 bir kod satırında durma noktası olduğu anlamına gelir. DevTools artık bu kod satırı yürütülmeden ö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 edin

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. Artık daha fazla bilgi toplama zamanı. DevAraçlar, değişken değerlerini incelemek için çok sayıda araç sunar.

1. Yöntem: Kapsamı İnceleme

Bir kod satırında duraklatıldığında Kapsam sekmesi, yürütme sırasında hangi yerel ve genel değişkenlerin tanımlandığını ve her bir değişkenin değerini 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

İzleme sekmesi, değişkenlerin zaman içindeki değerlerini izlemenize olanak tanır. İzleyin, 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 sorunun nedenini doğruladı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, Play Console'u kullanarak hatalara yönelik olası düzeltmeleri test edebilirsiniz. Hemen deneyin:

1. Console çekmecesi açık değilse açmak için Escape tuşuna basın. Bu sayfa, DevTools pencerenizin en altında açılır.
2. Konsolda 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üzeltmeyi uygula

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. 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 Kırma noktalarını devre dışı bırak'ı tıklayın. Ürünün etkin olduğunu belirtmek için rengi maviye dönüşür. Bu ayar etkinken Geliştirici Araçları, 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 farklı yöntem sunulur:

• Yalnızca belirttiğiniz koşul doğru olduğunda tetiklenen koşullu kesme noktaları.
• Yakalanan veya yakalanmayan istisnalarda kesme noktaları.
• İstenen URL, sağladığınız bir alt dizeyle eşleştiğinde tetiklenen XHR ayrılma 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ğiticide açıklanmayan birkaç kod adımı kontrolü vardır. Daha fazla bilgi edinmek için Adım adım kod satırı bölümüne bakın.