JavaScript hatalarını ayıkla

Kayce Baskçalar

Twitter GitHub Glitch

Sofya Emelianova

GitHub

Bu eğitimde, Geliştirici Araçları'ndaki JavaScript sorunlarının giderilmesine ilişkin temel iş akışı öğretilmektedir. Aşağıda bu eğitimin video sürümünü okumaya devam edin veya videoyu izleyin.

1. Adım: Hatayı yeniden oluşturun

Hata ayıklamanın ilk adımı her zaman hatayı tutarlı bir şekilde yeniden oluşturan bir dizi işlem bulmaktır.

1. Yeni bir sekmede bu demoyu açın.
2. 1 Sayı metin kutusuna 5 girin.
3. 2 Sayı metin 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. Doğru sayı 6 olmalı.

2. Adım: 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 profili oluşturma 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. Command+Option+J (Mac) veya Control+Shift+J (Windows, Linux) tuşlarına basarak Geliştirici Araçları'nı açın. Bu kısayol Konsol panelini açar.

   

2. Kaynaklar sekmesini tıklayın.

   

Kaynaklar paneli kullanıcı arayüzü 3 bölümden oluşur:

1. Dosya Gezgini bölmesi. Sayfanın istediği her dosya burada listelenir.
2. Kod Düzenleyici bölmesi. Dosya Gezgini bölmesinde bir dosya seçtikten sonra dosyanın içeriği burada görüntülenir.
3. JavaScript Hata Ayıklaması bölmesi. Sayfanın JavaScript'ini incelemek için çeşitli araçlar. Geliştirici Araçları pencereniz genişse bu bölme, Kod Düzenleyici bölmesinin sağında gösterilir.

3. Adım: Kodu ayrılma noktasıyla duraklatın

Bunun gibi bir sorunda hata ayıklamanın yaygın bir yöntemi, 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ı bunu daha hızlı yapabilir. Ayrılma noktası, kodunuzu yürütme işleminin ortasında duraklatmanıza ve o andaki tüm değerleri zamanında incelemenize olanak tanır. Kesme noktalarının, console.log() yöntemine göre birkaç avantajı vardır:

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

Kısacası, ayrılma noktaları sayesinde 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şkili 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. JavaScript Hata Ayıklaması bölmesinde, 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ında, Genişlet'i tıklayın. Geliştirici Araçları, click 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. Geliştirici Araçları, 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 duraklattıysanız doğru satırda duraklatma yapana kadar Komut Dosyası Yürütme İşlemini Devam Ettir tuşuna basın.

   Not: Farklı bir satırda duraklattıysanız ziyaret ettiğiniz her sayfada click etkinlik işleyici kaydeden bir tarayıcı uzantınız vardır. Uzantının click işleyicisinde duraklatıldı. Gizli olarak göz atmak için Gizli Mod'u kullanırsanız (tüm uzantılar devre dışı bırakılır) 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 kesme noktası türünden yalnızca bir tanesidir. Tüm farklı türleri ezberlemeye değer çünkü her tür sonuçta farklı senaryolarda mümkün olan en hızlı şekilde hata ayıklamanıza yardımcı olur. Her türü ne zaman ve nasıl kullanacağınızı öğrenmek için Kodunuzu Kesme Noktalarıyla Duraklatma bölümüne bakın.

4. Adım: Kodda adım adım ilerleyin

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

1. Geliştirici Araçları'nın Kaynaklar panelinde, onClick() işlevinin yürütülmesinde her defasında bir satır olacak şekilde 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. Sonraki işlev çağrısının üzerinden geç düğmesini tıklayın. Geliştirici Araçları, inputsAreEmpty() komutunu, içine girmeden çalıştırır. DevTools'un birkaç satırı nasıl atladığına dikkat edin. Bunun nedeni, inputsAreEmpty() işlevinin yanlış olarak değerlendirilmesi ve dolayısıyla if ifadesinin kod bloğunun yürütülememesidir.

Bu, adım adım kod yazmanın temel fikridir. get-started.js içindeki koda bakarsanız hatanın muhtemelen updateLabel() işlevi içinde bir yerde olduğunu görebilirsiniz. Her kod satırını tek tek incelemek yerine, kodu hatanın olası konumuna daha yakın olacak şekilde duraklatmak için başka bir ayrılma noktası türü kullanabilirsiniz.

5. Adım: Kod satırı ayrılma noktası ayarlayın

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

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

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

2. Kodun sol tarafında, 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. Komut dosyası yürütmeye devam et'i tıklayın. Komut dosyası, 32. satıra ulaşana kadar yürütülmeye 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 duraklıyor.

6. Adım: Değişken değerlerini kontrol edin

addend1, addend2 ve sum değerleri şüpheli görünüyor. Tırnak işaretleri içine alınır, yani dize olmaları gerekir. Bu, hatanın nedenini açıklamak için 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 bölmesi

Bir kod satırında duraklattığınızda, Kapsam bölmesi her bir değişkenin değeriyle birlikte hangi yerel ve genel değişkenlerin tanımlandığını gösterir. Ayrıca, uygun olduğunda kapatma değişkenlerini de gösterir. Bir değişken değerini düzenlemek için çift tıklayın. Bir kod satırında duraklatılmadığında Kapsam bölmesi boş olur.

2. Yöntem: İfadeleri İzleme

İzleme İfadeleri sekmesi, değişkenlerin zaman içindeki değerlerini izlemenize olanak tanır. Adından da anlaşılacağı gibi, İzleme İfadeleri yalnızca değişkenlerle sınırlı değildir. İzleme İfadesinde, geçerli herhangi bir JavaScript ifadesini depolayabilirsiniz. Hemen deneyin:

1. İzle sekmesini tıklayın.
2. İfade Ekle simgesini tıklayın.
3. typeof sum yazın.
4. Enter tuşuna basın. Geliştirici Araçları'nda typeof sum: "string" gösteriliyor. İki nokta üst üste işaretinin sağındaki değer, Watch İfadenizin sonucudur.

Yukarıdaki ekran görüntüsünde, typeof sum saat ifadesini oluşturduktan sonra İzle İfadesi bölmesi (sağ alt) gösterilmektedir. Geliştirici Araçları pencereniz büyükse sağda, Etkinlik İşleyici Ayrılma Noktaları bölmesinin üzerinde İzleme İfadesi bölmesi bulunur.

Şüphelendiği gibi, sum bir sayı olması gereken bir dize olarak değerlendiriliyor. Şimdi hatanın nedeninin bu olduğunu onaylamış oldunuz.

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 hatalarla ilgili olası düzeltmeleri test etmek için 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. Konsola parseInt(addend1) + parseInt(addend2) yazın. Bu ifade, addend1 ve addend2 kapsamında olan bir kod satırında duraklatıldığınız için işe yarar.
3. Enter tuşuna basın. Geliştirici Araçları, ifadeyi değerlendirir ve 6 çıktısını çıkarır. Bu, demoda ortaya çıkmasını beklediğiniz sonuçtur.

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

7. Adım: Düzeltmeyi uygulayın

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

1. Komut dosyası yürütmeye devam et'i tıklayın.
2. Kod Düzenleyici'de 31. satırdaki 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. Kesme noktalarını devre dışı bırak'ı tıklayın . Ürünün etkin olduğunu belirtmek için rengi maviye döner. Geliştirici Araçları, bu ayar etkinken ayarladığınız ayrılma noktalarını yoksayar.
5. Farklı değerlerle demoyu deneyin. Demo artık doğru hesaplama yapıyor.

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

Önemli bilgi: Chrome sürüm 105'ten itibaren Duraklatılmış bir işlevi canlı olarak düzenleyebilirsiniz.

Sonraki adımlar

Tebrikler! Artık JavaScript hatalarını ayıklarken Chrome Geliştirici Araçları'ndan en iyi şekilde nasıl yararlanacağınızı biliyorsunuz. Bu eğitimde öğrendiğiniz araçlar ve yöntemler sayesinde sayısız saat kazandırabilirsiniz.

Bu eğitim, ayrılma noktalarını ayarlamanın yalnızca iki yolunu göstermiştir. Geliştirici Araçları'nda aşağıdakiler de dahil birçok yöntem vardır:

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

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

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