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ı

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

Geliştirici Araçları'nda bir kod satırı ayrılma noktası ayarlamak için:

1. Kaynaklar panelini tıklayın.
2. Sonlandırmak 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ı ayrılma noktaları

Yürütmeyi durdurmak istediğinizde ancak yalnızca bir koşulu doğruladığınızda koşullu kod satırı kesme noktası kullanın.

Bu tür kesme noktaları, özellikle bir döngüde destek kaydınızla alakasız araları atlamak istediğinizde yararlı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ı Konsol'a kaydedin.

Bir 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. Logpoint 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ünde iki noktalı pembe bir simge görünür.

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

Kod satırı ayrılma noktalarını düzenle

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

Ayrılma noktaları bölümü, ayrılma 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 ayrılma noktalarının tek tek veya gruplara nasıl devre dışı bırakılacağı ya da etkinleştirileceği gösterilmektedir. Bir ayrılma noktasını devre dışı bıraktığınızda Kaynaklar paneli satır numarasının yanındaki işaretçisini ş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 (grup) 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ştir.
• 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 ayrılma noktasını düzenlemek için:

• Etkinleştirmek veya devre dışı bırakmak için bir ayrılma noktasının 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.

  

• İçerik menüsünü görmek için bir ayrılma noktasını sağ tıklayın ve 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.
  • Kesme noktasını kaldır.
  • Diğer kesme noktalarını (tüm dosyalarda) kaldırın.
  • Tüm kesme noktalarını (tüm dosyalarda) kaldırın.

Çeşitli ayrılma noktası düzenlemelerinin nasıl çalıştığı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.

Ara konumunu yoksaymak 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ı yoksayabilirsiniz. İş akışını öğrenmek için sonraki videoyu izleyin.

Hiçbir zaman burada duraklama özelliği sayesinde hata ayıklayıcı ifadelerini ve kod satırı ayrılma noktaları ile Etkinlik işleyici ayrılma noktaları hariç diğer tüm kesme noktası türlerini yoksayabilirsiniz.

Burada hiç duraklatma, duraklatılmaması gereken ifade duraklatmaya neden olan ifadeden farklıysa birden fazla ifade içeren 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 ayrılma 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şikliği ayrılma noktası oluşturmak için içerik menüsü gösterilmektedir.

DOM değişikliği ayrılma noktalarının listesini şurada bulabilirsiniz:

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

Bu sayfada ş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 ayrılma noktası türleri

• Alt ağaç değişiklikleri. Seçili olan düğümün bir alt öğesi kaldırıldığında, eklendiğinde veya bir alt düğümün 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.
• Özelliklerde yapılan değişiklikler: Şu anda seçili olan düğüme bir özellik eklendiğinde veya kaldırıldığında ya da bir özellik değeri değiştiğinde tetiklenir.
• Düğüm Kaldırma: Seçili 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 Breakpoints (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, XHR'nin istek URL'sinin herhangi bir yerinde bulunduğunda Geliştirici Araçları duraklar.
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şleyici ayrılma noktaları

Bir etkinlik tetiklendikten sonra çalışan etkinlik işleyici kodunda duraklatmak istediğinizde etkinlik işleyici ayrılma 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 işçisinde 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 ayrılma 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 Kırma Noktaları bölümünde, aşağıdaki seçeneklerden birini veya her ikisini de etkinleştirin ve ardından kodu yürütün:

• Yakalanmayan istisnalarda duraklat'ı 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 senkron hem de asenkron çağrılarda 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 DevTools 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 kapsamında olduğu bir yere kod satırı ayrılma 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.

Güvenilir Türü ayrılma 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 Kırma Noktaları bölümünde, İGP İhlali Ayrılma Noktaları bölümüne gidin ve aşağıdaki seçeneklerden birini veya her ikisini de etkinleştirin ve 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 inceleyin.

  

  Bu örnekte, yürütme bir politika ihlali nedeniyle 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 amaçlarınıza ulaşmak için Güvenilir Türler ile 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ürler hata ayıklamasını uygulama başlıklı makaleyi inceleyin.