Ayrılma noktalarıyla kodunuzu duraklatma

Kayce Basques

Sofia Emelianova

JavaScript kodunuzu duraklatmak için kesme noktalarını kullanın. Bu kılavuzda, DevTools'da bulunan her bir kesme noktası türü ve bu türlerin ne zaman kullanılacağı ve nasıl ayarlanacağı açıklanmaktadır. Hata ayıklama işlemiyle ilgili etkileşimli bir eğitim için Chrome Geliştirici Araçları'nda JavaScript Hata Ayıklama'ya Başlama başlıklı makaleyi inceleyin.

Her bir kesme noktası türünün ne zaman kullanılacağına genel bakış

En iyi bilinen kesme noktası türü kod satırı kesme noktasıdır. Ancak kod satırında durak noktaları ayarlamak, özellikle de tam olarak nereye bakacağınızı bilmiyorsanız veya büyük bir kod tabanıyla çalışıyorsanız verimsiz olabilir. Diğer kesme noktası türlerini nasıl ve ne zaman kullanacağınızı bilerek hata ayıklama işleminde zamandan tasarruf edebilirsiniz.

Kod satırı kesme noktaları

İncelenmesi gereken kod bölgesini tam olarak biliyorsanız kod satırında durma noktası kullanın. DevTools, bu kod satırı yürütülmeden önce her zaman duraklar.

DevTools'ta kod satırı kesme noktası ayarlamak için:

1. Kaynaklar panelini tıklayın.
2. Kesintiye uğratmak istediğiniz kod satırını içeren dosyayı açın.
3. Kod satırına gidin.
4. Kod satırının solunda satır numarası sütunu bulunur. Bu düğmeyi tıklayın. Satır numarası sütununun üst kısmında mavi bir simge görünür.

Bu örnekte, 29. satırda ayarlanmış bir kod satırı kesme noktası gösterilmektedir.

Kodunuzdaki kod satırı kesme noktaları

Kodunuzdan debugger'yi çağırarak o satırda duraklatın. Bu, kod satırında kesme noktası ile eşdeğerdir. Tek fark, kesme noktasının DevTools kullanıcı arayüzünde değil, kodunuzda ayarlanmasıdır.

console.log('a');
console.log('b');
debugger;
console.log('c');

Koşullu kod satırı kesme noktaları

Yürütmeyi durdurmak istediğinizde ancak yalnızca belirli bir koşul doğru olduğunda koşullu kod satırı duraklatma noktası kullanın.

Bu tür kesme noktaları, özellikle döngüde destek kaydınızla alakasız araları atlamak istediğinizde kullanışlıdır.

Koşullu kod satırı kesme noktası ayarlamak için:

1. Kaynaklar panelini açın.
2. Kesintiye uğratmak istediğiniz kod satırını içeren dosyayı açın.
3. Kod satırına gidin.
4. Kod satırının solunda satır numarası sütunu bulunur. Sağ tıklayın.
5. Koşullu kesme noktası ekle'yi seçin. Kod satırının altında bir iletişim kutusu gösterilir.
6. İletişim kutusuna durumunuzu girin.
7. Kesme noktasını etkinleştirmek için Enter tuşuna basın. Satır numarası sütununun üst kısmında soru işareti içeren turuncu bir simge görünür.

Bu örnekte, yalnızca i=6 iterasyonunda bir döngüde x 10'ü aştığında tetiklenen koşullu bir kod satırı kesme noktası gösterilmektedir.

Kod satırı durma noktalarını günlüğe kaydetme

Kod satırında duraklatma noktaları (günlük noktaları) kullanarak, yürütmeyi duraklatmadan ve kodunuzu console.log() çağrılarıyla karmaşıklaştırmadan mesajları Console'a kaydedin.

Günlük noktası ayarlamak için:

1. Kaynaklar panelini açın.
2. Kesintiye uğratmak istediğiniz kod satırını içeren dosyayı açın.
3. Kod satırına gidin.
4. Kod satırının solunda satır numarası sütunu bulunur. Sağ tıklayın.
5. Log noktası ekle'yi seçin. Kod satırının altında bir iletişim kutusu gösterilir.

6. Günlük mesajınızı iletişim kutusuna girin. console.log(message) çağrısında kullandığınız söz dizimini kullanabilirsiniz.

   Örneğin, aşağıdakileri günlüğe kaydedebilirsiniz:

   "A string " + num, str.length > 1, str.toUpperCase(), obj
   

   Bu durumda, günlük kaydına eklenen mesaj şudur:

   // str = "test"
   // num = 42
   // obj = {attr: "x"}
   A string 42 true TEST {attr: 'x'}
   

7. Kesme noktasını etkinleştirmek için Enter tuşuna basın. Satır numarası sütununun üst kısmında iki nokta içeren pembe bir simge görünür.

Bu örnekte, 30. satırda bir dize ve değişken değerini Konsol'a kaydeden bir günlük noktası gösterilmektedir.

Kod satırındaki kesme noktalarını düzenleme

Kod satırı kesme noktalarını devre dışı bırakmak, düzenlemek veya kaldırmak için Kesme noktaları bölümünü kullanın.

Kesme noktası gruplarını düzenleme

Duraklatma noktaları bölümü, duraklatma noktalarını dosyaya göre gruplandırır ve satır ve sütun numaralarına göre sıralar. Gruplarla şunları yapabilirsiniz:

• Bir grubu daraltmak veya genişletmek için adını tıklayın.
• Bir grubu veya kesme noktasını tek tek etkinleştirmek ya da devre dışı bırakmak için grubun veya kesme noktasının yanındaki simgesini tıklayın.
• Bir grubu kaldırmak için fareyle grubun üzerine gelip simgesini tıklayın.

Bu videoda, grupların nasıl daraltılacağı ve kesme noktalarının tek tek veya gruplar halinde nasıl devre dışı bırakılacağı ya da etkinleştirileceği gösterilmektedir. Bir kesme noktasını devre dışı bıraktığınızda Kaynaklar paneli, satır numarasının yanındaki işaretçiyi şeffaf hale getirir.

Gruplarda içerik menüleri bulunur. Kırılma noktaları bölümünde bir grubu sağ tıklayın ve aşağıdakilerden birini seçin:

• Dosyadaki (gruptaki) tüm kesme noktalarını kaldırın.
• Dosyadaki tüm kesme noktalarını devre dışı bırakır.
• Dosyadaki tüm kesme noktalarını etkinleştirin.
• Tüm kesme noktalarını (tüm dosyalarda) kaldırın.
• Diğer kesme noktalarını (diğer gruplarda) kaldırın.

Kesme noktalarını düzenleme

Bir kesme noktasını düzenlemek için:

• Bir kesme noktasını etkinleştirmek veya devre dışı bırakmak için yanındaki simgesini tıklayın. Bir kesme noktasını devre dışı bıraktığınızda Kaynaklar paneli, satır numarasının yanındaki işaretçiyi şeffaf hale getirir.
• Fareyle bir kesme noktasının üzerine gelip düzenlemek için 'ü, kaldırmak için 'u tıklayın.

• Bir kesme noktasını düzenlerken satır içi düzenleyicideki açılır listeden türünü değiştirin.

  

• Bir kesme noktasını sağ tıklayarak içerik menüsünü görüntüleyin ve aşağıdaki seçeneklerden birini belirleyin:

  

  • Konumu göster.
  • Koşulu veya günlük noktasını düzenleyin.
  • Tüm kesme noktalarını etkinleştirin.
  • Tüm kesme noktalarını devre dışı bırakın.
  • Ayrılma noktasını kaldırın.
  • Diğer kesme noktalarını (tüm dosyalarda) kaldırın.
  • Tüm kesme noktalarını (tüm dosyalarda) kaldırın.

Çeşitli kesme noktası düzenlemelerinin nasıl yapıldığını görmek için videoyu izleyin: devre dışı bırakma, kaldırma, koşulu düzenleme, menüden konumu gösterme ve türü değiştirme.

"Burada asla duraklama" seçeneğiyle duraklamaları atlama

Başka nedenlerle gerçekleşecek duraklamaları atlamak için Burada hiçbir zaman duraklatma kod satırı kesme noktasını kullanın. Bu, istisna durak noktalarını etkinleştirdiğiniz ancak hata ayıklayıcının, hata ayıklama yapmak istemediğiniz özellikle gürültülü bir istisnada durmaya devam ettiğinde yararlı olabilir.

Bir ara verme yerini devre dışı bırakmak için:

1. Kaynaklar panelinde kaynak dosyayı açın ve bölüme ayırmak istemediğiniz satırı bulun.
2. Soldaki satır numarası sütununda, ara vermeye neden olan ifadenin yanındaki satır numarasını sağ tıklayın.
3. Açılır menüden Burada hiçbir zaman duraklatma'yı seçin. Satırın yanında turuncu (koşullu) bir kesme noktası görünür.

Ayrıca, yürütme duraklatılmışken kesme noktasını devre dışı bırakabilirsiniz. İş akışını öğrenmek için sonraki videoyu izleyin.

Burada hiçbir zaman duraklatma seçeneğini kullanarak hata ayıklayıcı ifadelerini ve kod satırı durak noktaları ile etkinlik dinleyici durak noktaları dışındaki diğer tüm durak noktası türlerini devre dışı bırakabilirsiniz.

Burada hiç duraklatma, duraklatılmaması gereken ifade duraklatmaya neden olan ifadeden farklıysa birden fazla ifadenin bulunduğu bir satırda başarısız olabilir. Kaynak haritalı kodda her kesinti noktası konumu, kesintiye neden olan orijinal ifadeye karşılık gelmez.

DOM değişiklik ayrılma noktaları

Bir DOM düğümünü veya alt öğelerini değiştiren kodda duraklamak istediğinizde DOM değişikliği durak noktası kullanın.

DOM değişikliği için kesme noktası ayarlamak üzere:

1. Öğeler sekmesini tıklayın.
2. Kesme noktasını ayarlamak istediğiniz öğeye gidin.
3. Öğeyi sağ tıklayın.
4. Fareyle Duraklat'ın üzerine gelip Alt ağaç değişiklikleri, Özellik değişiklikleri veya Düğüm kaldırma'yı seçin.

Bu örnekte, DOM değişiklik durak noktası oluşturmaya yönelik bağlam menüsü gösterilmektedir.

DOM değişiklik durma noktalarının listesini şu konumlarda bulabilirsiniz:

• Öğeler > DOM Ayrılma Noktaları bölmesi.
• Kaynaklar > DOM Ayrılma Noktaları yan bölmesi.

Burada şunları yapabilirsiniz:

• simgesini kullanarak bu özellikleri etkinleştirin veya devre dışı bırakın.
• Sağ tıklayın > DOM'de Kaldır veya Göster'i seçin.

DOM değişiklik kesme noktası türleri

• Alt ağaç değişiklikleri. Geçerli olarak seçili düğümün bir alt öğesi kaldırıldığında veya eklendiğinde ya da bir alt öğenin içeriği değiştirildiğinde tetiklenir. Alt düğüm özelliği değişikliklerinde veya geçerli olarak seçili düğümde yapılan değişikliklerde tetiklenmez.
• Özellik değişiklikleri: Mevcut seçili düğümde bir özellik eklendiğinde veya kaldırıldığında ya da bir özellik değeri değiştiğinde tetiklenir.
• Düğüm Kaldırma: Şu anda seçili olan düğüm kaldırıldığında tetiklenir.

XHR/fetch ayrılma noktaları

Bir XHR'nin istek URL'si belirli bir dize içerdiğinde duraklamak istediğinizde XHR/fetch ayrılma noktası kullanın. Geliştirici Araçları, XHR'nin send()'yi çağırdığı kod satırında duraklatılır.

Bu özelliğin yararlı olduğu durumlardan biri, sayfanızın yanlış bir URL istediğini gördüğünüzde ve yanlış isteğe neden olan AJAX veya Getir kaynak kodunu hızlıca bulmak istediğinizde ortaya çıkar.

XHR/fetch ayrılma noktası ayarlamak için:

1. Kaynaklar panelini tıklayın.
2. XHR Ayrılma Noktaları bölmesini genişletin.
3. Ayırma noktası ekle'yi tıklayın.
4. Bölünmesini istediğiniz dizeyi girin. Bu dize bir XHR'nin istek URL'sinin herhangi bir yerinde bulunduğunda DevTools duraklatılır.
5. Onaylamak için Enter tuşuna basın.

Bu örnekte, URL'sinde org içeren tüm istekler için XHR/fetch Ayrılma Noktaları'nda XHR/fetch ayrılma noktasının nasıl oluşturulacağı gösterilmektedir.

Etkinlik işleyicisi için kesme noktaları

Bir etkinlik tetiklendikten sonra çalışan etkinlik işleyici kodunu duraklatmak istediğinizde etkinlik işleyicisi için duraklatma noktalarını kullanın. click gibi belirli etkinlikleri veya tüm fare etkinlikleri gibi etkinlik kategorilerini seçebilirsiniz.

1. Kaynaklar panelini tıklayın.
2. Etkinlik İşleyici Ayrılma Noktaları bölmesini genişletin. DevTools, Animasyon gibi etkinlik kategorilerinin listesini gösterir.
3. Bu kategorilerden birini işaretleyerek ilgili kategorideki herhangi bir etkinlik tetiklendiğinde duraklatın veya kategoriyi genişletip belirli bir etkinliği işaretleyin.

Bu örnekte, deviceorientation için etkinlik işleyici kesme noktasının nasıl oluşturulacağı gösterilmektedir.

Ayrıca Hata Ayıklama Aracı, Paylaşılan Depolama Alanı Worklet'leri dahil olmak üzere her tür web çalışanı veya worklet'te gerçekleşen etkinliklerde duraklatılır.

Bu örnekte, Hata Ayıklama Aracı'nın bir hizmet çalışanında gerçekleşen setTimer etkinliğinde duraklatıldığı gösterilmektedir.

Etkinlik işleyicilerin listesini Öğeler > Etkinlik İşleyiciler bölmesinde de bulabilirsiniz.

İstisna kesme noktaları

Yakalanan veya yakalanmayan bir istisna atan kod satırında duraklatmak istediğinizde istisna durak noktalarını kullanın. Node.js dışındaki herhangi bir hata ayıklama oturumunda bu tür istisnaların her ikisini de bağımsız olarak duraklatabilirsiniz.

Kaynaklar panelinin Duraklatma noktaları bölümünde aşağıdaki seçeneklerden birini veya ikisini birden etkinleştirin, ardından kodu yürütün:

• Yakalanmayan istisnalarda duraklat seçeneğini işaretleyin.

  

  Bu örnekte, yakalanmayan bir istisnayla karşılaşıldığında yürütme duraklatılır.

• Yakalanan istisnalarda duraklat seçeneğini işaretleyin.

  

  Bu örnekte, yakalanan bir istisnada yürütme duraklatılır.

Eşzamansız çağrılarda istisnalar

Yakalanan ve yakalanmayan onay kutularından biri veya her ikisi de etkinleştirildiğinde Hata Ayıklama Aracı, hem senkronize hem de asenkron çağrılardaki ilgili istisnalarda duraklatmayı dener. Asenkron durumda Hata Ayıklama Aracı, ne zaman duracağını belirlemek için tüm sözlerde ret işleyicileri arar.

Yakalanan istisnalar ve yok sayılan kod

İstisnaları Yoksay Listesi etkinken Hata Ayıklama Aracı, istisnalar yoksayılmayan çerçevelerde yakalandığında veya çağrı yığınında bu tür bir çerçeveden geçtiğinde duraklar.

Aşağıdaki örnekte, Hata Ayıklama Aracı'nın, yoksayılmayan mycode.js üzerinden geçen ve yoksayılan library.js tarafından atılan yakalanan bir istisnada duraklatıldığı gösterilmektedir.

Hata Ayıklama Aracı'nın uç durumlardaki davranışı hakkında daha fazla bilgi edinmek için bu demo sayfasında bir dizi senaryoyu test edin.

İşlev kesme noktaları

Belirli bir işlev her çağrıldığında duraklatmak istediğinizde functionName, hata ayıklama yapmak istediğiniz işlev olduğunda debug(functionName) işlevini çağırın. debug()'ü kodunuza ekleyebilir (console.log() ifadesi gibi) veya Geliştirici Araçları Konsolu'ndan çağırabilirsiniz. debug(), işlevin ilk satırında bir kod satırı kesme noktası ayarlamaya eşdeğerdir.

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

Hedef işlevin kapsamda olduğundan emin olun

Hata ayıklamasını yapmak istediğiniz işlev kapsamda değilse DevTools bir ReferenceError hatası oluşturur.

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

DevTools Console'dan debug() işlevini çağırıyorsanız hedef işlevin kapsamda olduğundan emin olmak zor olabilir. Aşağıda bir strateji verilmiştir:

1. İşlevin kapsamda olduğu bir yere kod satırı kesme noktası ayarlayın.
2. Kesme noktasını tetikleyin.
3. Kod, kod satırınızdaki duraklatma noktasında hâlâ duraklatılmışken Geliştirici Araçları Konsolu'nda debug()'ü çağırın.

Trusted Type kesme noktaları

Trusted Type API, siteler arası komut dosyası çalıştırma (XSS) saldırıları olarak bilinen güvenlik açıklarına karşı koruma sağlar.

Kaynaklar panelinin Duraklatma noktaları bölümünde CSP İhlali Duraklatma Noktaları bölümüne gidin ve aşağıdaki seçeneklerden birini veya ikisini birden etkinleştirin, ardından kodu yürütün:

• Havuz İhlalleri'ni kontrol edin.

  

  Bu örnekte, yürütme işlemi bir havuz ihlali nedeniyle duraklatılmıştır.

• Politika İhlalleri'ni kontrol edin.

  

  Bu örnekte, politika ihlali nedeniyle yürütme duraklatılmıştır. Güvenilir Tür politikaları trustedTypes.createPolicy kullanılarak ayarlanır.

API'yi kullanma hakkında daha fazla bilgiyi şu adreslerde bulabilirsiniz:

• Güvenlik hedeflerinizi daha da ileri taşımak için Güvenilir Türlerle DOM tabanlı siteler arası komut dosyası çalıştırma güvenlik açıklarını önleme başlıklı makaleyi inceleyin.
• Hata ayıklama için Chrome Geliştirici Araçları'nda CSP ve Güvenilir Türlerde hata ayıklama başlıklı makaleyi inceleyin.