JavaScript hata ayıklama referansı

Kayce Basques

Sofia Emelianova

Chrome Geliştirici Araçları hata ayıklama özelliklerinin kapsamlı bir referansı olan bu makaleyi inceleyerek yeni hata ayıklama iş akışlarını keşfedin.

Hata ayıklamayla ilgili temel bilgileri öğrenmek için Chrome Geliştirici Araçları'nda JavaScript Hata Ayıklama İşlemine Başlama bölümüne bakın.

Kesme noktaları içeren kodu duraklatma

Kodunuzu yürütmenin ortasında duraklatabilmek için bir kesme noktası ayarlayın. Kesme noktalarının nasıl ayarlanacağını öğrenmek için Kesme noktalarıyla kodunuzu duraklatma başlıklı makaleyi inceleyin.

Duraklatıldığında değerleri kontrol edin

Yürütme duraklatıldığında hata ayıklayıcı, mevcut işlevdeki tüm değişkenleri, sabitleri ve nesneleri bir kesme noktasına kadar değerlendirir. Hata ayıklayıcı, geçerli değerleri ilgili bildirimlerin yanında satır içinde gösterir.

Değerlendirilen değişkenleri, sabit değerleri ve nesneleri sorgulamak için Konsolu kullanabilirsiniz.

Fareyle üzerine geldiğinizde sınıf/işlev özelliklerini önizleme

Yürütme duraklatılmış durumdayken, özelliklerini önizlemek için fareyle bir sınıfın veya işlev adının üzerine gelin.

Adım adım kod

Kodunuz duraklatıldıktan sonra, her seferinde bir ifade olacak şekilde kodun arasında dolaşın, süreç boyunca kontrol akışını ve özellik değerlerini inceleyin.

Kod satırının üstüne git

Hata ayıklama işlemini yaptığınız sorunla alakalı olmayan bir işlev içeren kod satırında duraklatıldığında, işleve girmeden işlevi yürütmek için Atla'yı tıklayın.

Örneğin, aşağıdaki kodda hata ayıkladığınızı varsayalım:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

A tarihinde duraklatıldınız. Geliştirici Araçları, Üzerine git'e bastığınızda atlıyorsunuz. Bu da B ve C. Geliştirici Araçları, ardından D tarihinde duraklar.

Kod satırına geç

Yaşadığınız sorunla ilgili işlev çağrısı içeren bir kod satırında duraklatıldığında hata ayıklaması için Adımları uygulayın'ı Bu işlevi araştırmak için devam edebilir.

Örneğin, aşağıdaki kodda hata ayıklama yaptığınızı varsayalım:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

A tarihinde duraklatıldınız. Geliştirici Araçları, Şuraya git'e bastığınızda bu kod satırını yürütür ve ardından B.

Kod satırının dışına çık

Hata ayıklamakta olduğunuz sorunla ilgili olmayan bir işlevin içinde durakladığınızda, Adım adım öğesini seçerek fonksiyonun kodunu yazın.

Örneğin, aşağıdaki kodda hata ayıkladığınızı varsayalım:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

A tarihinde duraklatıldınız. Geliştirici Araçları, Çık'a bastığınızda kodun geri kalanını getName(), bu örnekte yalnızca B olarak belirlenmiş ve ardından C tarihinde duraklayacaktır.

Belirli bir satıra kadar tüm kodu çalıştırma

Uzun bir işlevde hata ayıklama yaparken, hata ayıklamaya çalıştığınız sorunla ilgili olmayan çok sayıda kod olabilir.

Tüm satırları tek tek inceleyebilirsiniz ancak bu işlem yorucu olabilir. İlgilendiğiniz satırda kod satırına durak noktası koyabilir ve ardından Komut Dosyası Çalıştırmayı Devam Et'e basabilirsiniz ancak daha hızlı bir yol da vardır.

İlgilendiğiniz kod satırını sağ tıklayın ve Buraya devam et'i seçin. DevTools, o noktaya kadarki tüm kodu çalıştırır ve ardından bu satırda duraklar.

Komut dosyası yürütmeyi devam ettirme

Bir duraklatma sonrasında komut dosyanızın yürütülmesine devam etmek için Komut Dosyası Yürütmeyi Devam Ettir'i tıklayın. . DevTools, komut dosyasını bir sonraki kesme noktasına (varsa) kadar yürütür.

Komut dosyası yürütmeyi zorunlu kıl

Tüm kesme noktalarını yoksaymak ve komut dosyanızı yürütmeye devam etmeye zorlamak için Komut Dosyası Yürütme'yi basılı tutun ve ardından Komut dosyasını yürütmeye zorla'yı seçin.

İleti dizisi bağlamını değiştirme

Web çalışanlarıyla veya hizmet çalışanlarıyla çalışırken İleti dizileri bölmesinde listelenen bir bağlamı tıklayarak bağlamayı öğreteceğim. Mavi ok simgesi, o anda hangi bağlamın seçili olduğunu gösterir.

Yukarıdaki ekran görüntüsünde Gönderiler bölmesi mavi renkle gösterilmiştir.

Örneğin, hem ana komut dosyanızdaki hem de hizmetinizdeki bir ayrılma noktasında durakladığınızı varsayalım çalışan komut dosyasıdır. Hizmet çalışanı bağlamının yerel ve genel özelliklerini görüntülemek istiyorsunuz ancak Kaynaklar panelinde ana komut dosyası bağlamı gösteriliyor. İleti dizileri bölmesinde hizmet çalışanı girişini tıklayarak ilgili bağlama geçebilirsiniz.

Virgülle ayrılmış ifadelere göz atma

Virgülle ayrılmış ifadelere göz atmak, küçültülmüş kodda hata ayıklamanıza olanak tanır. Örneğin, aşağıdaki kodu ele alalım:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

Küçültüldüğünde, virgülle ayrılmış bir foo(),foo(),42 ifadesi içerir:

function foo(){}function bar(){return foo(),foo(),42}bar();

Hata Ayıklama Aracı, bu tür ifadelerde de aynı adımları uygular.

Bu nedenle, adımlama davranışı aynıdır:

• Kodu sıkıştırma ve kod yazma arasında.
• Küçültülmüş kodu orijinal kod açısından hata ayıklamak için kaynak eşlemeleri kullanırken. Diğer bir deyişle, hata ayıklama yaptığınız gerçek kaynak küçültülmüş olsa bile, noktalı virgül gördüğünüzde her zaman bu noktalı virgüllerin üzerinden geçebilirsiniz.

Yerel, kapalı ve global mülkleri görüntüleyin ve düzenleyin

Bir kod satırında duraklatılmış durumdayken yerel, kapatma ve global kapsamlardaki mülk ve değişkenlerin değerlerini görüntülemek ve düzenlemek için Kapsam bölmesini kullanın.

• Değiştirmek için bir özellik değerini çift tıklayın.
• Numaralandırılamayan özellikler devre dışıdır.

Yukarıdaki ekran görüntüsünde Kapsam bölmesi mavi renkle belirtilmiştir.

Mevcut çağrı yığınını görüntüleme

Bir kod satırında duraklatılmış durumdayken, sizi bu noktaya getiren çağrı yığınını görüntülemek için Çağrı Yığını bölmesini kullanın.

Bir girişi tıklayarak işlevin çağrıldığı kod satırına gidin. Mavi ok simgesi, DevTools'un şu anda vurgulamakta olduğu işlevi gösterir.

Yukarıdaki ekran görüntüsünde yer alan Arama Grubu bölmesi mavi renkle gösterilmiştir.

Çağrı yığınındaki bir işlevi (çerçeve) yeniden başlatma

Bir işlevin davranışını gözlemlemek ve hata ayıklama akışını yeniden başlatmak zorunda kalmadan tekrar çalıştırmak için bu işlev duraklatıldığında tek bir işlevin yürütülmesini yeniden başlatabilirsiniz. Diğer bir deyişle, çağrı yığınındaki işlevin çerçevesini yeniden başlatabilirsiniz.

Bir kareyi yeniden başlatmak için:

1. Bir kesme noktasında işlev yürütmesini duraklatın. Çağrı Yığını bölmesi, işlev çağrılarının sırasını kaydeder.

2. Arama Grubu bölmesinde bir işlevi sağ tıklayın ve açılır menüden Çerçeveyi yeniden başlat'ı seçin.

   

Yeniden başlatma çerçevesi'nin işleyiş şeklini anlamak için aşağıdaki kodu kullanabilirsiniz:

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

foo() işlevi 0 öğesini bağımsız değişken olarak alır, günlüğe kaydeder ve bar() işlevini çağırır. Buna karşılık bar() işlevi, bağımsız değişkeni artırır.

Her iki işlevin çerçevelerini aşağıdaki şekilde yeniden başlatmayı deneyin:

1. Yukarıdaki kodu yeni snippet'e kopyalayın ve çalıştırın. Yürütme, debugger kod satırı kesme noktasında durur.
2. Hata ayıklayıcının, işlev beyanının yanındaki mevcut değeri (value = 1) gösterdiğini unutmayın.
3. bar() karesini yeniden başlatın.
4. F9 tuşuna basarak değer artırma ifadesinde adım adım ilerleyin. Mevcut değerin arttığını fark edin: value = 2.
5. İsteğe bağlı olarak, Kapsam bölmesinde değeri düzenlemek ve istediğiniz değeri ayarlamak için çift tıklayın.

6. bar() karesini yeniden başlatmayı ve artış ifadesinde birkaç kez daha ilerlemeyi deneyin. Değer artmaya devam ediyor.

Çerçeve yeniden başlatıldığında bağımsız değişkenler sıfırlanmaz. Başka bir deyişle, yeniden başlatma işlemi işlev çağrısındaki ilk durumu geri yüklemez. Bunun yerine, yürütme işaretçisini işlevin başına taşır.

Bu nedenle, geçerli bağımsız değişken değeri aynı işlevin yeniden başlatılmasında bellekte kalır.

1. Ardından, Çağrı Grubu'nda foo() çerçevesini yeniden başlatın. . Değerin tekrar 0 olduğuna dikkat edin. .

JavaScript'te, bağımsız değişkenlerde yapılan değişiklikler işlevin dışında görünmez (yansıtılmaz). İç içe yerleştirilmiş işlevler, bellekteki konumlarını değil değerleri alır. 1. Bu eğiticiyi tamamlamak için komut dosyası yürütmeye devam edin (F8).

Yoksayılanlar listesindeki çerçeveleri göster

Varsayılan olarak, Arama Grubu bölmesi yalnızca kodunuzla alakalı kareleri gösterir ve Ayarlar > Yoksayma Listesi.

Üçüncü taraf çerçeveleri dahil olmak üzere çağrı yığınının tamamını görüntülemek için Çağrı Yığını bölümünde Yoksayılanlar listesindeki çerçeveleri göster'i etkinleştirin.

Bu demo sayfasında deneyin:

1. Kaynaklar panelinde src > app app.component.ts dosya.
2. increment() işlevinde bir kesme noktası ayarlayın.
3. Çağrı Yığını bölümünde, İçeriğini yoksayılan kareleri göster onay kutusunu işaretleyin veya işaretini kaldırın ve çağrı yığınındaki ilgili veya tam kare listesini inceleyin.

Eş zamansız çerçeveleri göster

Kullandığınız çerçeve destekleniyorsa Geliştirici Araçları, eşzamansız kodun her iki parçasını birbirine bağlayarak eşzamansız işlemleri izleyebilir.

Bu durumda Çağrı Yığını, asynkron çağrı çerçeveleri dahil olmak üzere arama geçmişinin tamamını gösterir.

Yığın izlemeyi kopyala

Geçerli çağrıyı kopyalamak için Çağrı Grubu bölmesinde herhangi bir yeri sağ tıklayın ve Yığın izlemeyi kopyala'yı seçin. panoya gönderir.

Aşağıdaki örnekte çıkış örneği verilmiştir:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

Dosya ağacında gezinme

Dosya ağacında gezinmek için Sayfa bölmesini kullanın.

Dosya ağacında oluşturulan ve dağıtılan dosyaları gruplandırma

Çerçeveler kullanarak web uygulamaları geliştirirken (örneğin, React veya Angular), derleme araçları tarafından oluşturulan küçültülmüş dosyalar nedeniyle (örneğin, webpack veya Vite) kaynaklarda gezinmek zor olabilir.

Kaynaklar arasında gezinmenize yardımcı olması için Kaynaklar > Sayfa bölmesi, dosyaları iki kategoriye ayırabilir:

• Yazar. IDE'nizde görüntülediğiniz kaynak dosyalara benzer. Geliştirici Araçları, bu dosyaları derleme araçlarınızın sağladığı kaynak eşlemelerine dayalı olarak oluşturur.
• Dağıtıldı. Tarayıcının okuduğu asıl dosyalar. Bu dosyalar genellikle küçültülür.

Gruplandırmayı etkinleştirmek için > Dosya ağacının en üstündeki üç nokta menü menüsünde yer alan Dosyaları Oluşturulan/Dağıtılanlar ölçütüne göre gruplandırın.

Yoksayılanlar listesindeki kaynakları dosya ağacında gizle

Yalnızca oluşturduğunuz koda odaklanmanıza yardımcı olması için Kaynaklar > Sayfa bölmesinde, Ayarlar > Yoksayma Listesi varsayılan olarak kullanılır.

Bu tür komut dosyalarını tamamen gizlemek için Kaynaklar > Sayfa > Yoksayılanlar listesindeki kaynakları gizle .

Komut dosyalarını veya komut dosyası kalıplarını yoksayma

Hata ayıklama sırasında atlamak için bir komut dosyasını yoksayabilirsiniz. Yoksayıldığında bir komut dosyası Çağrı Grubu bölmesinde belirsiz hale gelir ve siz adım adım komut dosyası işlevlerine kodunuzla kontrol edin.

Örneğin, aşağıdaki kodu adım adım incelediğinizi varsayalım:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A, güvendiğiniz bir üçüncü taraf kitaplığıdır. Hata ayıkladığınız sorunun üçüncü taraf kitaplığıyla ilişkili değilse komut dosyasını yoksaymak mantıklıdır.

Dosya ağacındaki bir komut dosyasını veya dizini yoksayın

Bir komut dosyasını veya bir dizinin tamamını yoksaymak için:

1. Kaynaklar'da > Sayfa'da bir dizini veya komut dosyasını sağ tıklayın.
2. Dizin/komut dosyasını yoksayılanlar listesine ekle'yi seçin.

Yoksayılanlar listesindeki kaynakları gizlemediyseniz bu tür bir kaynağı dosya ağacında seçebilir ve uyarı banner'ında Yoksayılanlar listesinden kaldır veya Yapılandır'ı tıklayın.

Aksi takdirde, gizli ve yoksayılan dizinleri ve komut dosyalarını Ayarlar > Yoksayma Listesi.

Düzenleyici bölmesinde bir komut dosyasını yoksayma

Bir komut dosyasını Düzenleyici bölmesinden yoksaymak için:

1. Dosyayı açın.
2. Herhangi bir yeri sağ tıklayın.
3. Komut dosyasını yoksayılanlar listesine ekle'yi seçin.

Bir komut dosyasını yoksayılanlar listesinden Ayarlar > Yoksayılanlar Listesi'nden kaldırabilirsiniz.

Çağrı Yığını bölmesinden bir komut dosyasını yoksayın

Çağrı Grubu bölmesindeki bir komut dosyasını yoksaymak için:

1. Komut dosyasındaki bir işlevi sağ tıklayın.
2. Komut dosyasını yoksayılanlar listesine ekle'yi seçin.

Yoksayılanlar listesindeki bir komut dosyasını Ayarlar > Yoksayma Listesi.

Ayarlar'dan komut dosyasını yoksayma

Ayarlar > bölümüne bakın Yoksayma Listesi.

Hata ayıklama kodu snippet'lerini herhangi bir sayfadan çalıştırma

Console'da aynı hata ayıklama kodunu tekrar tekrar çalıştırdığınızı fark ederseniz snippet'leri kullanabilirsiniz. Snippet'ler, Geliştirici Araçları'nda yazdığınız, depoladığınız ve çalıştırdığınız yürütülebilir komut dosyalarıdır.

Daha fazla bilgi için Herhangi Bir Sayfada Kod Snippet'lerini Çalıştırma başlıklı makaleyi inceleyin.

Özel JavaScript ifadelerinin değerlerini izleyin

Özel ifadelerin değerlerini izlemek için İzleme bölmesini kullanın. Geçerli tüm JavaScript'leri izleyebilirsiniz ifade eder.

• Yeni bir izleme ifadesi oluşturmak için İfade Ekle'yi tıklayın.
• Mevcut tüm ifadelerin değerlerini yenilemek için Yenile'yi tıklayın. Kodda adım atarken değerler otomatik olarak yenilenir.
• Fareyle bir ifadenin üzerine gelip İfadeyi Sil'i tıklayarak ifadeyi silin.

Komut dosyalarını incele ve düzenle

Sayfa bölmesinde bir komut dosyası açtığınızda, Geliştirici Araçları içeriği Düzenleyici bölmesinde gösterilir. Düzenleyici bölmesinde kodunuza göz atabilir ve kodunuzu düzenleyebilirsiniz.

Ayrıca, içerikleri yerel olarak üstlenebilir veya bir çalışma alanı oluşturabilir ve DevTools'ta yaptığınız değişiklikleri doğrudan yerel kaynaklarınıza kaydedebilirsiniz.

Küçültülmüş dosyaları okunabilir hâle getirme

Kaynaklar paneli varsayılan olarak küçültülmüş dosyaları güzelce yazdırır. Güzel yazdırıldığında Düzenleyici, birden çok satırda tek bir uzun kod satırı gösterebilir ve bunun satır devamı olduğunu belirtmek için - işaretini kullanabilir.

Küçültülmüş dosyayı yüklenirken görmek için Düzenleyici'nin sol alt köşesindeki { } simgesini tıklayın.

Kod bloklarını katlama

Bir kod bloğunu katlamak için fareyle sol sütundaki satır numarasının üzerine gelin ve Daralt'ı tıklayın.

Kod bloğunu açmak için yanındaki {...} işaretini tıklayın.

Bu davranışı yapılandırmak için Ayarlar > Tercihler > Kaynaklar.

Komut dosyasını düzenleme

Bir hatayı düzeltirken, genellikle JavaScript kodunuzdaki bazı değişiklikleri test etmek istersiniz. Değişiklikleri harici bir tarayıcıda yapıp sayfayı yeniden yüklemeniz gerekmez. Komut dosyanızı DevTools'ta düzenleyebilirsiniz.

Bir komut dosyasını düzenlemek için:

1. Dosyayı Kaynaklar panelinin Düzenleyici bölmesinde açın.
2. Düzenleyici bölmesinde değişikliklerinizi yapın.

3. Kaydetmek için Komut+S (Mac) veya Ctrl+S (Windows, Linux) tuşlarına basın. DevTools, JS dosyasının tamamını Chrome'un JavaScript motoruna yama yapar.

   

   Yukarıdaki ekran görüntüsünde Düzenleyici bölmesi mavi dış çizgilidir.

Duraklatılmış bir işlevi canlı olarak düzenleme

Yürütme duraklatılmış durumdayken mevcut işlevi düzenleyebilir ve aşağıdaki sınırlamalarla değişiklikleri canlı olarak uygulayabilirsiniz:

• Yalnızca Çağrı Grubu'nda en üstteki işlevi düzenleyebilirsiniz.
• Yığının daha alt kısımlarında, aynı işlev için yinelenen çağrılar olmamalıdır.

Bir işlevi canlı düzenlemek için:

1. Yürütmeyi bir kesme noktasıyla duraklatma.
2. Duraklatılmış işlevi düzenleyin.
3. Değişiklikleri uygulamak için Command / Control + S tuşlarına basın. Hata ayıklayıcı, işlevi otomatik olarak yeniden başlatır.
4. Yürütmeye devam edin.

Bu iş akışını öğrenmek için aşağıdaki videoyu izleyin.

Bu örnekte, addend1 ve addend2 değişkenleri başlangıçta yanlış string türüne sahip. Bu nedenle, sayılar yerine dizelerin birleştirilmesi gerekir. Bu sorunu düzeltmek için canlı düzenleme sırasında parseInt() işlevleri eklenir.

Komut dosyasında metin arama ve değiştirme

Metinlerde arama yapmak için:

1. Dosyayı Kaynaklar panelinin Düzenleyici bölmesinde açın.
2. Yerleşik bir arama çubuğunu açmak için Command+F (Mac) veya Ctrl+F (Windows, Linux) tuşlarına basın.
3. Çubuğu kullanarak sorgunuzu girin. İsteğe bağlı olarak şunları yapabilirsiniz:
   • Sorgunuzu büyük/küçük harfe duyarlı hale getirmek için Büyük/küçük harfe duyarlı eşle'yi tıklayın.
   • RegEx ifadesi kullanarak arama yapmak için Normal İfade kullan'ı tıklayın.
4. Enter tuşuna basın. Önceki veya sonraki arama sonucuna atlamak için yukarı ya da aşağı düğmesine basın.

Bulduğunuz metni değiştirmek için:

1. Arama çubuğunda Değiştir düğmesini tıklayın.
2. Değiştirilecek metni yazıp Değiştir veya Tümünü değiştir'i tıklayın.

JavaScript'i devre dışı bırakma

Chrome Geliştirici Araçları ile JavaScript'i Devre Dışı Bırakma başlıklı makaleye göz atın.