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'ya Başlama başlıklı makaleyi inceleyin.

Kesme noktaları içeren kodu duraklatma

Kodunuzu yürütmenin ortasında duraklatabilmek için bir kesme noktası ayarlayın. Ayrılma noktalarını nasıl ayarlayacağınızı öğrenmek için Kodunuzu Kesme Noktalarıyla Duraklatma bölümüne bakın.

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

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ı, mevcut değerleri ilgili bildirimlerin yanında satır içinde gösterir.

Değerlendirilen değişkenleri, sabitleri ve nesneleri sorgulamak için Konsol'u kullanabilirsiniz.

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

Yürütme duraklatılmışken fareyle bir sınıf veya işlev adının üzerine gelerek özelliklerini önizleyebilirsiniz.

Kodu adım adım inceleme

Kodunuz duraklatıldıktan sonra, kontrol akışını ve mülk değerlerini inceleyerek kodunuzu bir ifadede bir adım ilerleyerek inceleyin.

Kod satırını atlama

Hata ayıklama işlemini yaptığınız sorunla alakalı olmayan bir işlev içeren kod satırında durakladığınızda, 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. Atla'ya bastığınızda DevTools, atladığınız işlevdeki (B ve C) tüm kodu yürütür. Ardından DevTools, D tarihinde duraklatılır.

Kod satırına geç

Hata ayıklamaya çalıştığınız sorunla ilgili bir işlev çağrısı içeren bir kod satırında duraklatıldığında, ilgili işlevi daha ayrıntılı incelemek için İçeri adım'ı tıklayın.

Ö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. Adım'a bastığınızda DevTools bu kod satırını yürütür ve ardından B üzerinde duraklar.

Kod satırından çıkma

Hata ayıklama yaptığınız sorunla ilgili olmayan bir işlevin içinde duraklatıldığında, işlevin kodunun geri kalanını yürütmek için Adım at'ı tıklayın.

Örneğin, aşağıdaki kodda hata ayıklama yaptığı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. Bekleme'ye bastığınızda Geliştirici Araçları, kodun geri kalanını getName() içinde (bu örnekte B) yürütür ve ardından C'te duraklar.

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 arasında adım gezebilirsiniz, ancak bu 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

Duraklattıktan sonra komut dosyanızın yürütülmesine devam etmek için Komut Dosyası Yürütmeyi Devam Ettir'i tıklayın. Geliştirici Araçları, komut dosyasını bir sonraki ayrılma noktasına kadar çalıştırır (varsa).

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 işçileriyle veya hizmet işçileriyle çalışırken İş parçaları bölmesinde listelenen bir bağlamı tıklayarak ilgili bağlama geçin. Mavi ok simgesi, şu anda hangi bağlamın seçili olduğunu gösterir.

Yukarıdaki ekran görüntüsünde İleti dizileri bölmesi mavi renkle gösterilmiştir.

Örneğin, hem ana komut dosyanızda hem de hizmet çalışanı komut dosyanızda bir kesme noktasında duraklatıldığınızı varsayalım. Service Worker bağlamı için yerel ve genel özellikleri görüntülemek istiyorsunuz ancak Kaynaklar panelinde ana komut dosyası bağlamı gösteriliyor. İleti dizileri bölmesindeki hizmet çalışanı girişini tıklayarak bu bağlama geçiş yapabilirsiniz.

Virgülle ayrılmış ifadelerde adımlama

Virgülle ayrılmış ifadelerde adımlama yaparak küçültülmüş kodda hata ayıklama yapabilirsiniz. Örneğin, aşağıdaki kodu ele alalım:

function foo() {}

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

bar();

Minimuma indirildiğinde, virgül ile 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:

• Küçültülmüş ve yazılmış kod arasında.
• Küçültülmüş kodda orijinal kod bakımından hata ayıklamak için kaynak eşlemeleri kullanılı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 adım adım ilerleyebilirsiniz.

Yerel, kapatma ve genel mülkleri görüntüleme ve düzenleme

Bir kod satırında duraklatıldığında yerel, kapalı ve genel kapsamlardaki özelliklerin 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.
• Listelenebilen olmayan özellikler devre dışı görünü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ı Grubu bölmesini kullanın.

Bir girişi tıklayarak işlevin çağrıldığı kod satırına gidin. Mavi ok simgesi, Geliştirici Araçları'nın şu anda hangi işlevi vurguladığını gösterir.

Yukarıdaki ekran görüntüsünde Çağrı Yığını bölmesi mavi renkle belirtilmiş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ın tamamını yeniden başlatmak zorunda kalmadan yeniden çalıştırmak için, duraklatılmış tek bir işlevin yürütülmesini yeniden başlatabilirsiniz. Başka bir deyişle, çağrı yığınında işlevin çerçevesini yeniden başlatabilirsiniz.

Bir kareyi yeniden başlatmak için:

1. İşlev yürütmeyi bir kesme noktasında duraklatma. Ç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 bağımsız değişkenini alır, günlüğe kaydeder ve bar() işlevini çağırır. bar() işlevi de bağımsız değişkeni artırır.

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

1. Yukarıdaki kodu bir yeni snippet'e kopyalayıp ç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() çerçevesini 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() çerçevesini yeniden başlatmayı ve artma ifadesinde birkaç kez daha ilerlemeyi deneyin. Değer artmaya devam ediyor.

Karenin yeniden başlatılması bağımsız değişkenleri sıfırlamaz. Diğer bir deyişle, yeniden başlatma, işlev çağrısında ilk durumu geri yüklemez. Bunun yerine, yürütme işaretçisini işlevin başına getirir.

Bu nedenle, mevcut bağımsız değişken değeri aynı işlevin yeniden başlatılması sırasında bellekte kalır.

1. Ardından, Çağrı Grubu'nda foo() çerçevesini yeniden başlatın. Değerin tekrar 0 olduğunu fark 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ğerlerini 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 Çağrı Yığını bölmesi yalnızca kodunuzla alakalı çerçeveleri gösterir ve Ayarlar > Yoksay Listesi'ne eklenen tüm komut dosyalarını atlar.

Üçü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 dosyasını açın.
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 kareleri görüntüleme

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 kopyalama

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

Aşağıda çıkışa dair bir örnek 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 (ör. React veya Angular) kullanılarak web uygulamaları geliştirilirken derleme araçları (ör. webpack veya Vite) tarafından oluşturulan sıkıştırılmış dosyalar nedeniyle kaynaklarda gezinmek zor olabilir.

Kaynaklar arasında gezinmenize yardımcı olmak için Kaynaklar > Sayfa bölmesinde dosyalar iki kategoriye ayrılabilir:

• Yazıldı. 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 gerçek dosyalar. Bu dosyalar genellikle küçültülür.

Gruplandırmayı etkinleştirmek için dosya ağacının üst kısmındaki üç nokta menüsünden > Dosyaları Yazan/Yayınlayana göre gruplandır seçeneğini etkinleştirin.

Yoksayılanlar listesindeki kaynakları dosya ağacından gizleme

Yalnızca oluşturduğunuz koda odaklanmanıza yardımcı olmak için Kaynaklar > Sayfa bölmesinde, Ayarlar > Yoksay Listesi'ne eklenen tüm komut dosyaları veya dizinler varsayılan olarak devre dışı bırakılır.

Bu tür komut dosyalarını tamamen gizlemek için Kaynaklar > Sayfa > > İçerikleri yoksayılan kaynakları gizle'yi seçin.

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

Hata ayıklama sırasında atlamak için bir komut dosyasını yoksayabilirsiniz. Yok sayılan komut dosyaları Çağrı Yığını bölmesinde gizlenir ve kodunuzda adım adım ilerlerken komut dosyasının işlevlerine asla adım atmazsınız.

Örneğin, aşağıdaki kodu adım adım uyguladığınızı 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 ilgili olmadığından eminseniz komut dosyasını yoksayabilirsiniz.

Dosya ağacında bir komut dosyasını veya dizini yoksayma

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

1. Kaynaklar > Sayfa bölümünde bir dizini veya komut dosyası dosyasını sağ tıklayın.
2. Dizini/komut dosyasını yoksayılanlar listesine ekle'yi seçin.

İçerikleri yoksayılanlar listesinde bulunan kaynakları gizlemediyseniz dosya ağacında bu tür bir kaynağı seçebilir ve uyarı banner'ında İçerikleri yoksayılanlar listesinden kaldır veya Yapılandır'ı tıklayabilirsiniz.

Aksi takdirde, gizli ve yoksayılan dizinleri ve komut dosyalarını Ayarlar > Yoksayılanlar Listesi'nden kaldırabilirsiniz.

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.

Arama yığını bölmesinde bir komut dosyasını yoksayma

Arama Grubu bölmesinde bir komut dosyasını yoksaymak için:

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

Ayarlar > Yoksayılanlar Listesi bölümüne giderek yoksayılanlar listesindeki bir komut dosyasını kaldırabilirsiniz.

Ayarlar'dan komut dosyalarını yoksayma

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

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. Kod parçaları, DevTools'da yazdığınız, depoladığınız ve çalıştırdığınız yürütülebilir komut dosyalarıdır.

Daha fazla bilgi edinmek için Herhangi Bir Sayfadan Kod Snippet'leri Çalıştırma bölümüne bakın.

Özel JavaScript ifadelerinin değerlerini izleme

Özel ifadelerin değerlerini izlemek için İzleme bölmesini kullanın. Geçerli herhangi bir JavaScript ifadesini izleyebilirsiniz.

• 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ını açtığınızda DevTools, içeriğini Düzenleyici bölmesinde gösterir. Düzenleyici bölmesinde kodunuza göz atabilir ve kodunuzu düzenleyebilirsiniz.

Ayrıca, içerikleri yerel olarak geçersiz kılabilir veya çalışma alanı oluşturup Geliştirici Araçları'nda 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ı okunaklı hâle getirir. Düzenleyici, güzel bir şekilde yazdırıldığında tek bir uzun kod satırını birden fazla satırda gösterebilir. Bu satırın satır devamı olduğunu belirtmek için - kullanılır.

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

Kod bloklarını daraltma

Bir kod bloğunu daraltmak için fareyle sol sütundaki satır numarasının üzerine gelip 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 bölümüne bakın.

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. Kaynaklar panelinin Düzenleyici bölmesinde dosyayı 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ışken mevcut işlevi düzenleyebilir ve aşağıdaki sınırlamalarla değişiklikleri canlı olarak uygulayabilirsiniz:

• Yalnızca Çağrı Yığını'ndaki en üstteki işlevi düzenleyebilirsiniz.
• Yığının daha alt kısmında aynı işleve yordamlı çağrı yapılmamalıdır.

Bir işlevi canlı olarak 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 parseInt() işlevleri canlı düzenleme sırasında 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 arama çubuğunu açmak için Command+F (Mac) veya Ctrl+F (Windows, Linux) tuşlarına basın.
3. Çubuğa 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 ifade 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ın, ardından 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ı makaleyi inceleyin.