JavaScript hata ayıklama referansı

Kayce Baskçalar

Twitter GitHub Glitch

Sofya Emelianova

GitHub

Chrome Geliştirici Araçları'nın hata ayıklama özelliklerine ilişkin bu kapsamlı referansı kullanarak 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 Hatalarını Ayıklamaya Başlama başlıklı makaleye bakın.

Ayrılma noktalarıyla kodu duraklat

Kodunuzu yürütme işleminin ortasında duraklatabilmek için bir ayrılma noktası ayarlayın. Kesme 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 edin

Yürütme duraklatıldığında hata ayıklayıcı, geçerli işlevdeki ayrılma noktasına kadarki tüm değişkenleri, sabit değerleri ve nesneleri 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 Console'u kullanabilirsiniz.

Önemli bilgi: Yürütme duraklatıldığında geçerli işlevi yeniden başlatabilir ve hatta canlı düzenleme yapabilirsiniz.

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 veya işlev adının üzerine gelin.

Adım adım kod

Kodunuz duraklatıldığında, her defasında bir ifade olacak şekilde kodda ilerleyin ve süreç boyunca kontrol akışını ve özellik değerlerini araştırın.

Adım adım kod satırının üzerine gelme

Hata ayıklamakta olduğunuz sorunla alakalı olmayan bir fonksiyon içeren bir kod satırında duraklatıldığında, işlevi değişiklik yapmadan çalıştırmak için Şuna git düğmesini tıklayın.

Örneğin, aşağıdaki kodda hata ayıklama işlemi yaptığı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ı. Geliştirici Araçları, üzerine git'e bastığınızda, üzerine geldiğiniz işlevdeki tüm kodu (B ve C) yürütür. Geliştirici Araçları, D üzerinde duraklatır.

Kod satırına girin

Hata ayıklamakta olduğunuz sorunla ilgili bir işlev çağrısı içeren bir kod satırında duraklatıldığında, söz konusu işlevi daha ayrıntılı incelemek için Şuraya git'i tıklayın.

Örneğin, aşağıdaki kodda hata ayıklama işlemi 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ı. Şuraya git'e bastığınızda Geliştirici Araçları bu kod satırını yürütür ve B üzerinde duraklar.

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

Hata ayıklamakta olduğunuz sorunla ilgili olmayan bir işlevin içinde duraklatıldığında, işlev kodunun geri kalanını yürütmek için Çıkış yap'ı tıklayın.

Örneğin, aşağıdaki kodda hata ayıklama işlemi 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ı. Çıkış yap'a bastığınızda Geliştirici Araçları, bu örnekte yalnızca B olan getName() kodunun geri kalanını yürütür ve C üzerinde duraklatır.

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

Uzun bir işlevde hata ayıklarken, hata ayıkladığınız sorunla alakalı olmayan birçok kod olabilir.

Tüm satırların üzerinden geçebilirsiniz ancak bu yorucu olabilir. İstediğiniz satırda bir kod satırı ayrılma noktası belirleyebilir ve ardından Komut Dosyası Yürütmeyi Devam Ettir ama bunun daha hızlı bir yolu vardır.

İlgilendiğiniz kod satırını sağ tıklayın ve Buraya devam et'i seçin. Geliştirici Araçları o noktaya kadar kodun tamamını çalıştırır ve ardından bu satırda 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 yürütür.

Komut dosyası yürütmeye zorla

Tüm kesme noktalarını yoksaymak ve komut dosyanızı yürütmeye devam etmeye zorlamak için Komut Dosyası Yürütmeyi Devam Ettir simgesini tıklayıp basılı tutun ve ardından Komut dosyası yürütmeye zorla'yı seçin.

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

Web çalışanları veya hizmet çalışanları ile çalışırken, İleti dizileri bölmesinde listelenen bir bağlamı tıklayarak ilgili bağlama geçebilirsiniz. Mavi ok simgesi, şu anda hangi bağlamın seçildiğini gösterir.

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

Örneğin, hem ana komut dosyanızdaki hem de hizmet çalışanı komut dosyanızdaki bir ayrılma 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. İş parçacıkları bölmesinde Service Worker girişini tıklayarak bu bağlama geçebilirsiniz.

Virgülle ayrılmış ifadelerde ilerleme

Önemli bilgi: Chrome sürüm 108'den itibaren Hata Ayıklayıcı, hem noktalı virgülle ayrılmış (;) hem de virgülle ayrılmış (,) ifadelerde adım adım ilerleyebilir.

Virgülle ayrılmış ifadelerde ilerlemek, küçültülmüş kodda hata ayıklamanızı sağlar. Ö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ış foo(),foo(),42 ifadesi içerir:

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

Hata Ayıklayıcı, bu tür ifadelerde aynı şekilde adımları uygular.

Dolayısıyla, adım davranışı aynıdır:

• Küçültülmüş ve yazılmış kod arasında.
• Küçültülmüş kodda orijinal kod açısından hata ayıklamak için kaynak eşlemelerini kullanı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 için adım adım ilerlemeyi bekleyebilirsiniz.

Yerel, kapanış ve genel özellikleri görüntüleme ve düzenleme

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

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

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

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

Bir kod satırında duraklattığınızda, sizi bu noktaya getiren arama yığınını görüntülemek için Arama Grubu bölmesini kullanın.

İşlevin çağrıldığı kod satırına atlamak için bir girişi tıklayın. Mavi ok simgesi, Geliştirici Araçları'nın şu anda vurguladığı işlevi gösterir.

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

Not: Bir kod satırında duraklatılmadığında Arama Grubu bölmesi boş olur.

Ç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 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. Ayrılma noktasında işlev yürütmeyi duraklatın. Çağrı Grubu bölmesi, işlev çağrılarının sırasını kaydeder.

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

   

   Not: WebAssembly, eşzamansız ve oluşturucu işlevleri hariç tüm işlev çerçevelerini Call Stack'de yeniden başlatabilirsiniz.

Çerçeveyi yeniden başlat'ın işleyiş şeklini anlamak için aşağıdaki kodu değerlendirin:

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. bar() işlevi de 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 bir snippet'e kopyalayın ve çalıştırın. Yürütme işlemi, debugger kod satırı ayrılma noktasında durur.
   Dikkat: Yürütme duraklatıldığında çağrı yığını karelerinin sırasını programlı bir şekilde değiştirmeyin. Bu durum, beklenmeyen hatalara neden olabilir.
2. Hata ayıklayıcının, işlev bildiriminin yanındaki 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ışı ifadesinde ilerleyin. Geçerli değerin arttığına dikkat edin: value = 2.
5. Dilerseniz Kapsam bölmesindeki değeri çift tıklayarak düzenleyebilir ve istediğiniz değeri ayarlayabilirsiniz.

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

   Önemli nokta: Değer neden 0 olarak sıfırlanmıyor?

Çerçeveyi yeniden başlatma, 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.

Dolayısıyla, geçerli bağımsız değişken değeri, aynı işlevin yeniden başlatıldığı durumlarda bellekte kalır.

1. Şimdi de Çağrı Yığını'nda foo() çerçevesini yeniden başlatın. Değerin tekrar 0 olduğuna dikkat edin.
   Önemli nokta: Değer neden 0 olarak sıfırlanıyor?

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 değerleri alır, bellekteki konumlarını almaz. 1. Bu eğiticiyi tamamlamak için komut dosyası yürütme işlemini (F8) devam ettirin.

Yoksayılanlar listesindeki çerçeveleri göster

Varsayılan olarak Arama Grubu bölmesinde yalnızca kodunuzla alakalı kareler gösterilir ve Ayarlar > Yoksayılanlar Listesi'ne eklenen komut dosyaları atlanır.

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

Şu 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 ilgili ya da tam kare listesini kontrol edin.

Eş zamansız kareleri görüntüleme

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

Bu durumda, Arama Grubu'nda eşzamansız arama çerçeveleri dahil tüm çağrı geçmişi gösterilir.

Önemli nokta: Geliştirici Araçları, bu "Eş Zamansız Yığın Etiketleme" özelliğini console.createTask() API yöntemini temel alarak uygular. API'yi uygulamak çerçevelere bağlıdır. Örneğin, Angular bu özelliği destekler.

Yığın izlemeyi kopyala

Arama Yığını bölmesinde herhangi bir yeri sağ tıklayın ve Yığın izlemeyi kopyala'yı seçerek mevcut çağrı yığınını panoya kopyalayın.

Çıkışın bir örneğini aşağıda görebilirsiniz:

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.

Yazılan ve dağıtılan dosyaları dosya ağacında gruplandır

Not: Bu, Chrome 104 sürümünde kullanılabilen bir önizleme özelliğidir.

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

Kaynaklar > Sayfa bölmesi, kaynaklarda gezinmenize yardımcı olmak için 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 göre 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 üst tarafındaki üç nokta menü simgesi altında > Dosyaları Yazılan/Dağıtılana göre gruplandır seçeneğini etkinleştirin.

Dosya ağacında yoksayılanlar listesindeki kaynakları gizleyin

Not: Bu, Chrome 106 sürümünde kullanılabilen bir önizleme özelliğidir.

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

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

Bir komut dosyasını veya komut dosyası kalıbını yoksayın

Hata ayıklama sırasında atlamak için komut dosyasını yoksayın. Yok sayıldığında, bir komut dosyası Çağrı Yığını bölmesinde belirsizleşir ve kodunuzda ilerlerken hiçbir zaman komut dosyasının işlevlerine adım atmazsınız.

Örneğin, şu kodu uyguladığınızı varsayalım:

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

A, güvendiğiniz bir üçüncü taraf kitaplığı. Hata ayıklamakta olduğunuz sorunun üçüncü taraf kitaplığıyla ilgili olmadığından eminseniz komut dosyasını göz ardı etmeniz mantıklıdır.

Dosya ağacından 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ını sağ tıklayın.
2. Yoksayılanlar listesine dizin/komut dosyası ekle'yi seçin.

Yoksayılanlar listesindeki kaynakları gizlemediyseniz dosya ağacında böyle bir kaynağı seçebilir ve uyarı banner'ında Yoksayılanlar listesinden kaldır veya Yapılandır'ı tıklayabilirsiniz.

Aksi takdirde, Ayarlar > Yoksayma Listesi'ne giderek gizli ve yoksayılan dizinleri ve komut dosyalarını listeden kaldırabilirsiniz.

Düzenleyici bölmesinden 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ı Ayarlar > Yoksayılanlar Listesi'nde yoksayılanlar listesinden kaldırabilirsiniz.

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

Bir komut dosyasını Çağrı Grubu bölmesinden 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.

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

Ayarlar'daki bir komut dosyasını yoksayma

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

Herhangi bir sayfadan hata ayıklama kodu snippet'lerini ç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'lerini Ç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 simgesini tıklayın. Kodda adım adım ilerlerken değerler otomatik olarak yenilenir.
• Fare imlecini bir ifadenin üzerine getirin ve silmek için İfadeyi Sil'i tıklayın.

Komut dosyalarını denetleme ve düzenleme

Sayfa bölmesinde bir komut dosyası açtığınızda, DevTools komut dosyasının 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 bir ç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üş dosyayı okunabilir hale getirme

Varsayılan olarak, Kaynaklar paneli küçültülmüş dosyaları oldukça yazdırır. Düzenleyici, güzelce yazdırıldığında birden çok satırda tek bir uzun kod satırı gösterebilir. Bu satır, satırın devamı olduğunu belirtmek için - içerebilir.

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

Kod bloklarını katla

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 genişletmek 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. Harici bir tarayıcıda değişiklikleri 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. Dosyayı Kaynaklar panelinin Düzenleyici bölmesinde 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ı, tüm JS dosyasını Chrome'un JavaScript motoruna yamalar.

   

   Yukarıdaki ekran görüntüsünde bulunan Düzenleyici bölmesi mavi renkle özetlenmiştir.

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

Not: Bu özellik, Chrome 105 sürümünde kullanılabilir.

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

• Çağrı Grubu'nda yalnızca en üstteki işlevi düzenleyebilirsiniz.
• Yığının daha alt kısımlarında aynı işleve yapılan yinelemeli çağrılar olmamalıdır.

Önemli nokta: Değişiklikleri uyguladığınızda hata ayıklayıcı, işlevi otomatik olarak yeniden başlatır. Bu nedenle, işlevi yeniden başlatmayla ilgili sınırlamalar da geçerlidir. WebAssembly, eşzamansız ve oluşturucu işlevlerini yeniden başlatamazsınız.

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

1. Yürütmeyi bir ayrılma noktasıyla duraklatın.
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ü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 sahiptir. Bu nedenle, dizeler sayı toplamak yerine birleştirilir. Sorunu düzeltmek için canlı düzenleme sırasında parseInt() işlevleri eklendi.

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

Bir komut dosyasında metin aramak 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:
   • 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ı makaleyi inceleyin.