JavaScript hatalarını ayıkla

Kayce Basques

Sofia Emelianova

Bu eğitimde, Geliştirici Araçları'ndaki JavaScript sorunlarını ayıklamayla ilgili temel iş akışı öğretilmektedir. Okunanlar veya bu eğiticinin video sürümünü izleyin.

Hatayı yeniden oluşturun

Bir hatayı sürekli olarak yeniden üreten bir dizi işlem bulmak her zaman hata ayıklama.

1. Yeni bir sekmede bu demoyu açın.
2. 1 Numara kutusuna 5 yazın.
3. 2 Numara kutusuna 1 girin.
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.

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

Geliştirici Araçları; CSS değiştirme, profil çıkarma sayfası gibi farklı görevler için birçok farklı araç sunar. performans ve ağ isteklerini izleme olanağı sunar. Kaynaklar paneli, hata ayıklamayı yaptığınız yerdir JavaScript'e dokunun.

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, dosya burada gösterilir.

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ğ tarafındadır. Bu durumda Kapsam ve İzleme sekmeleri, Kırma Noktaları, Çağrı yığını ve diğer sekmeleri daraltılabilir bölümler olarak birleştirir.

Kesme noktasıyla kodu duraklatma

Böyle bir sorunda hata ayıklamak için yaygın olarak kullanılan bir yöntem, çok sayıda console.log() ifadesi eklemektir kod içine yerleştirmeniz gerekir. Ö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. CEVAP ayrılma noktası, yürütmenin ortasında kodunuzu duraklatmanızı ve bu duraktaki tüm değerleri incelemenizi sağlar. yaşandığını söylüyor. Kesme noktalarının, console.log() yöntemine göre bazı avantajları vardır:

• console.log() ile kaynak kodunu manuel olarak açmanız, ilgili kodu bulmanız, console.log() ifadelerini çıkarıp Konsol. Kesme noktaları sayesinde, kodun nasıl olduğunu bile bilmeden ilgili kodda duraklayabilirsiniz. yapılandırılmalıdır.
• console.log() ifadelerinizde, eklemek istediğiniz her değeri açıkça belirtmeniz gerekir inceleyin. Geliştirici Araçları, ayrılma noktalarıyla tüm değişkenlerin o andaki değerlerini gösterir. Bazen kodunuzu etkileyen, sizin farkında bile olmadığınız değişkenler olabilir.

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

Bir adım geriye gidip uygulamanın işleyiş şeklini düşünürseniz, uygulamanızın ile ilişkili click etkinlik işleyicide yanlış toplam (5 + 1 = 51) 1. ve 2. numarayı ekle düğmesi. Bu nedenle, kodu ara vermemek isteyebilirsiniz. click işleyicisi tarafından yürütülüyor. 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üne ekleyin. Geliştirici Araçları, Animasyon ve Pano
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ıklama onay kutusunu işaretleyin. Geliştirici Araçları artık herhangi bir click olduğunda otomatik olarak duraklatılacak şekilde ayarlandı yürütüldüğünden emin olun.

   

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ı, kod:

   function onClick() {
   

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

   Not: Farklı bir satırda duraklattıysanız Ziyaret ettiğiniz her sayfada click etkinlik işleyici. Uzantının click cihazında duraklatıldınız dinleyicidir. Gizli modda göz atmak için Gizli Mod'u (tüm uzantıları devre dışı bırakan) kullanırsanız, görebilirsiniz. Her seferinde doğru kod satırında durakladığınızı görebilirsiniz.

Etkinlik İşleyici Ayrılma Noktaları, Geliştirici Araçları'nda bulunan birçok ayrılma noktası türünden yalnızca biridir. İnsanların tüm farklı türleri keşfetmeye değer, çünkü her tür sonuçta farklı hataları ayıklamanıza yardımcı olur. mümkün olduğunca hızlı şekilde belirlemelisiniz. Bunu ne zaman ve nasıl yapacağınızı öğrenmek için Kodunuzu Kesme Noktalarıyla Duraklatma bölümüne bakın. her bir türü kullanın.

Kodu adım adım açıklayın

Hataların yaygın nedenlerinden biri, komut dosyasının yanlış sırada çalışmasıdır. Kodunuzu adım adım gösterme , kodunuzun çalıştırılmasında teker teker ilerlemenizi ve tam olarak nerede olduğunu anlamanız için beklediğinizden farklı bir sırada yürütülüyor olabilir. 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şlemini adım atmadan yürütür. Geliştirici Araçları'nın sitenizin birkaç satırlık girin. Bunun nedeni, inputsAreEmpty() işlevinin yanlış olarak değerlendirilmesidir. Bu nedenle if ifadesinin kodu yürütülmedi.

Kodda ilerlemenin temel amacı budur. get-started.js içindeki koda bakarsanız updateLabel() fonksiyonunda hatanın muhtemelen bir yerde olduğunu görürsünüz. Kapsam kayması yerine, her kod satırında, kodu olasılığa daha yakın bir noktada duraklatmak için başka bir ayrılma noktası türü kullanabilirsiniz. hatanın konumu.

Kod satırı ayrılma noktası ayarla

Kod satırı ayrılma noktaları, en yaygın ayrılma noktası türüdür. Belirli bir bir kod satırı ayrılma noktası kullanın:

1. updateLabel() hücresindeki son kod satırına bakın:

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

2. Kodun solunda, bu özel kod satırının satır numarasını görebilirsiniz. Bu numara 32. 32'yi tıklayın. Geliştirici Araçları, 32 simgesinin üzerine mavi bir simge yerleştirir. Bunun anlamı, ilgili bir kodunu ekleyin. Geliştirici Araçları artık bu kod satırı tamamlanmadan önce her zaman duraklıyor yürütüldü.

3. Devam ettir Komut dosyası yürütmeyi devam ettir'i tıklayın. İlgili içeriği oluşturmak için kullanılan komut dosyası, 32. satıra ulaşana kadar yürütmeye devam eder. Geliştirici Araçları; 29, 30 ve 31. satırlarda addend1, addend2 ve sum değerlerini satır içinde bildirimlerinin yanında 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 dize oldukları anlamına gelir. Bu, hatanın nedenini açıklamak için iyi bir hipotezdir. Şimdi daha fazla bilgi toplama zamanı. Geliştirici Araçları, değişkenleri incelemek için birçok araç sunar. değerler.

1. Yöntem: Kapsamı İnceleme

Bir kod satırında duraklatıldığında Kapsam sekmesinde hangi yerel ve genel değişkenlerin her bir değişkenin değeriyle birlikte yürütme aşamasında tanımlanır. Ayrıca, yüksek performans gösteren geçerlidir. Bir kod satırında duraklatılmadığında Kapsam sekmesi boş olur.

Bir değişken değerini çift tıklayarak düzenleyin.

Not: Düzen tercihinize ve Geliştirici Araçları pencerenizin genişliğine bağlı olarak Kapsam sekmesi, Ayrılma noktaları ve Çağrı yığını ile birlikte daraltılabilir bir bölüm olarak görünebilir.

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 herhangi bir JavaScript'i "İzleyin" sekmesindeki ifade.

Not: Düzen tercihinize ve Geliştirici Araçları pencerenizin genişliğine bağlı olarak İzleme sekmesi, Kırma Noktaları ve Çağrı yığını ile birlikte daraltılabilir bir bölüm olarak görünebilir.

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. Geliştirici Araçları, typeof sum: "string" gösteriyor. İki noktanın sağındaki değer kullanabilirsiniz.

Bu ekran görüntüsünde, typeof sum kol saati oluşturulduktan sonra İzle sekmesi (sağ altta) gösteriliyor ifade eder.

Şüphelendiği gibi, sum bir sayı olması gerektiği halde dize olarak değerlendiriliyor. Onayladınız budur.

3. Yöntem: Konsol

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

1. Konsol çekmecesi açık değilse açmak için Escape tuşuna basın. Ekranın en altında açılır geliştirici araçları pencerenizi açın.
2. Konsolda parseInt(addend1) + parseInt(addend2) yazın. Bu ifadenin işe yarar çünkü addend1 ve addend2 özelliklerinin kapsam dahilinde olduğu bir kod satırında duraklatılır.
3. Enter tuşuna basın. Geliştirici Araçları, ifadeyi değerlendirir ve beklediğiniz sonuç olan 6 sonucunu yazdırır demoyu hazırlamalısınız.

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

Düzeltmeyi uygula

Hataya yönelik bir düzeltme buldunuz. Tek yapmanız gereken, kodu düzenleyip düzeltmeyi deneyerek yeniden çalıştırıyoruz. Düzeltmeyi uygulamak için Geliştirici Araçları'ndan ayrılmanız gerekmez. JavaScript kodunu düzenleyebilirsiniz doğrudan Geliştirici Araçları kullanıcı arayüzünden erişebilirsiniz. Hemen deneyin:

1. Devam ettir Komut dosyası yürütmeyi devam ettir'i tıklayın.
2. Kod Düzenleyici'de 31. satırı var sum = addend1 + addend2 var sum = parseInt(addend1) + parseInt(addend2).
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 parametre ayarlandığında Geliştirici Araçları, ayrılma noktalarını içerir.
5. Demoyu farklı değerlerle deneyin. Demo artık doğru hesaplama yapıyor.

ziyaret edin.

Dikkat: Bu iş akışı, yalnızca tarayıcınızda çalışan koda düzeltme uygular. Hayır bu kodu, sayfanızı ziyaret eden tüm kullanıcılar için düzeltebilirsiniz. Bunu yapmak için, sunucular. Ancak dosyaları Geliştirici Araçları'nda düzenleyebilir ve Çalışma Alanları ile kaynaklarınıza kaydedebilirsiniz.

İpucu: Chrome 105 sürümünden itibaren, Duraklatılmış bir işlevi canlı olarak düzenleyebilirsiniz.

Sonraki adımlar

Başarı: Tebrikler! Artık JavaScript hatalarını ayıklarken Chrome Geliştirici Araçları'ndan en iyi şekilde nasıl yararlanacağınızı biliyorsunuz. İlgili içeriği oluşturmak için kullanılan Bu eğitimde öğrendiğiniz araç ve yöntemler, size sayısız saat kazandırabilir.

Bu eğitim, ayrılma noktalarını ayarlamanın yalnızca iki yolunu göstermiştir. Geliştirici Araçları, pek çok farklı yol sunar. şunları içerir:

• Yalnızca sağladığınız koşul doğru olduğunda tetiklenen koşullu ayrılma noktaları.
• Yakalanan veya yakalanmamış 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üne bakın.

Bu eğiticide açıklanmayan birkaç tane kod adımı kontrolü vardır. Adımları uygulayın kod satırı ile ilgili daha fazla bilgi edinin.