JavaScript hata ayıklama referansı

Chrome Geliştirici Araçları hata ayıklama özelliklerine dair bu kapsamlı referansla 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 ayrılma noktası ayarlayın. Ayrılma noktalarını nasıl ayarlayacağınızı öğrenmek için Kodu Kesme Noktalarıyla Duraklatma bölümüne bakın.

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

Yürütme duraklatılmış durumdayken hata ayıklayıcı, geçerli işlev içindeki tüm değişkenleri, sabit değerleri ve nesneleri bir ayrılma 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 gelindiğinde 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ıklamakta olduğunuz sorunla alakalı olmayan bir işlev içeren bir kod satırında duraklatıldığında, işlevi bu adıma girmeden yürütmek için Adımları geç'i 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 tüm kodu yürüttüğünüz işlevdeki (B ve C) yürütür. Geliştirici Araçları, ardından D tarihinde duraklar.

Kod satırına geç

Hata ayıklamakta olduğunuz sorunla ilgili bir işlev çağrısı içeren bir kod satırında duraklatıldığında, işlevi daha ayrıntılı incelemek için Şuraya git seçeneğini 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);
}
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 tarihinde duraklar.

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

Hata ayıklamakta olduğunuz sorunla ilgili olmayan bir işlevin içinde duraklatıldığında, işlevin kodunun geri kalanını yürütmek için Ayrıl simgesini 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();
  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ış yap'a bastığınızda kodun geri kalanını getName() içinde yürütür (bu örnekte yalnızca B) ve ardından C tarihinde duraklar.

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

Uzun bir işlevde hata ayıklarken hata ayıklamakta olduğunuz 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 bir kod satırı ayrılma noktası ayarlayabilir ve ardından Komut Dosyası Yürütmeyi Devam Ettir düğmesine basabilirsiniz ancak daha hızlı bir yol vardır.

İlgilendiğiniz kod satırını sağ tıklayın ve Buraya devam et'i seçin. Geliştirici Araçları, kodun tamamını bu noktaya kadar çalıştırır ve ardından duraklar.

Komut dosyası yürütmeyi devam ettir

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. 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 ayrılma noktalarını yoksaymak ve komut dosyanızı yürütmeyi devam ettirmeye zorlamak için Resume Komut Dosyası Yürütmeyi Devam Ettir'i basılı tutun ve ardından Komut dosyası yürütmeye zorla seçeneğini belirleyin.

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

Web çalışanları veya hizmet çalışanlarıyla çalışırken, İleti dizileri bölmesinde listelenen bir bağlamı tıklayarak ilgili bağlama geçebilirsiniz. Mavi ok simgesi, o 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ızdaki hem de hizmet çalışanı komut dosyanızdaki bir ayrılma noktasında durakladığı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ış 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ıklayıcı, bu tür ifadelerde yine aynı şekilde ilerler.

Bu nedenle, adım atma 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, noktalı virgül gördüğünüzde, hata ayıkladığınız asıl kaynak küçültülmüş olsa bile her zaman bunların arasında adım adım ilerlemeyi bekleyebilirsiniz.

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

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 istediğiniz ö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 gösterilmiştir.

Geçerli çağrı yığınını görüntüle

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 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. 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. Bir kesme noktasında işlev yürütmesini duraklatın. Çağrı Grubu 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.

Aşağıdaki şekilde her iki işlevin çerçevelerini 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ı ayrılma noktasında durur.
2. Hata ayıklayıcının, işlev bildiriminin yanında geçerli değeri gösterdiğine dikkat edin: value = 1.
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ığına dikkat edin: value = 2.
5. Dilerseniz Kapsam bölmesinde değeri çift tıklayarak düzenleyebilir ve istediğiniz değeri belirleyebilirsiniz.

6. bar() karesini yeniden başlatmayı ve artış 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. 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. Şimdi Çağrı Grubundaki foo() karesini 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 Çağrı Yığını bölmesi yalnızca kodunuzla alakalı kareleri gösterir ve Ayarlar > Listeyi Yoksay bölümüne eklenen komut dosyalarını atlar.

Üçüncü taraf çerçeveler de dahil olmak üzere tüm çağrı yığınını görüntülemek için Çağrı Grubu 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 ayrılma noktası ayarlayın.
3. Çağrı Grubu bölümünde Yoksayılanlar listesindeki çerçeveleri göster onay kutusunu işaretleyin veya kutunun işaretini kaldırın ve çağrı yığınındaki çerçevelerin alakalı veya tam 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 Arama Yığını, eşzamansız çağrı çerçeveleri de dahil olmak üzere tüm çağrı geçmişini gösterir.

Yığın izlemeyi kopyala

Ç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ğı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 grup

Ç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ı olmak için Kaynaklar > Sayfa bölmesi, dosyaları iki kategoriye ayırabilir:

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

Gruplandırmayı etkinleştirmek için dosya ağacının en üstündeki üç nokta menüsünde bulunan > Dosyaları Yazılan/Dağıtılanlara göre gruplandır seçeneğini etkinleştirin.

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 > Listeyi Yoksay bölümüne varsayılan olarak eklenen tüm komut dosyaları veya dizinler devre dışı bırakılır.

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

Komut dosyasını veya komut dosyasını yoksayın

Hata ayıklama sırasında atlamak istediğiniz komut dosyalarını yoksayın. Yoksayıldığında, bir komut dosyası Çağrı Grubu bölmesinden gizlenir ve kodunuzda adım adım ilerlerken hiçbir zaman komut dosyasının işlevlerine giremezsiniz.

Örneğin, şu 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ı yoksaymanız önerilir.

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

Tek bir komut dosyasını veya bir 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. 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 > Yoksayılanlar Listesi bölümündeki listeden kaldırabilirsiniz.

Düzenleyici bölmesindeki bir komut dosyasını yoksayın

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.

Ayarlar > Yoksayılanlar Listesi bölümüne giderek yoksayılanlar listesindeki bir komut dosyasını 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.

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

Ayarlar'dan komut dosyasını yoksayma

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

Herhangi bir sayfadan hata ayıklama kodu snippet'leri çalıştırma

Console'da aynı hata ayıklama kodunu tekrar tekrar çalıştırıyorsanız 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 edinmek için Herhangi Bir Sayfadan Kod Snippet'leri Çalıştırma bölümüne bakın.

Özel JavaScript ifadelerinin değerlerini izleyin

Ö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 gezinirken değerler otomatik olarak yenilenir.
• Bir ifadenin üzerine gelin ve silmek için İfadeyi Sil'i tıklayın.

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 atıp 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üş bir dosyayı okunabilir hale 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'a 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ı Geliştirici Araçları'nda 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 Command+S (Mac) veya Ctrl+S (Windows, Linux) tuşlarına basın. Geliştirici Araçları, JS dosyasının tamamını Chrome'un JavaScript motoruna ekler.

   

   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 duraklatın.
2. Duraklatılan 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ütme işlemine 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. Böylece, sayı eklemek yerine dizeler birleştirilir. 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

Komut dosyasında metin aramak için:

1. Kaynaklar panelinin Düzenleyici bölmesinde dosyayı 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 Harf Eşleştir'i 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ı veya 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ırak

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