Ayrılma noktalarıyla kodunuzu duraklatma

Kayce Basques

Sofia Emelianova

JavaScript kodunuzu duraklatmak için kesme noktaları kullanın. Bu kılavuzda, devre dışı bırakılan her bir ayrılma noktası türü her türün ne zaman kullanılacağı ve nasıl ayarlanacağı konusunda bilgi edindiniz. Hata ayıklama sürecinin etkileşimli bir eğiticisi için Chrome Geliştirici Araçları'nda JavaScript Hata Ayıklamaya Başlama bölümüne bakın.

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

En iyi bilinen ayrılma noktası türü kod satırıdır. Ancak kod satırı ayrılma noktaları belirlemek açısından verimsizdir, özellikle de nereye bakacağınızı bilmiyorsanız veya bir oluşturabilirsiniz. Diğer hataları nasıl ve ne zaman kullanacağınızı öğrenerek türlerini düşünün.

Kod satırı ayrılma noktaları

Tam olarak araştırmanız gereken kod bölgesini biliyorsanız kod satırı ayrılma noktası kullanın. Geliştirici Araçları, 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. Ekranda mavi bir simge görünür: işaretini tıklayın.

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

Kodunuzdaki kod satırı ayrılma noktaları

Telefonda duraklatmak için kodunuzdan debugger numaralı telefonu arayın. Bu, bir kod satırı ayrılma noktası hariçtir.

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 ayrılma noktaları, özellikle bir döngüde, durumunuzla ilgisi olmayan araları atlamak istediğinizde kullanışlıdır.

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

1. Kaynaklar panelini açı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. 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örüntülenir.
6. İletişim kutusuna koşulunuzu girin.
7. Kesme noktasını etkinleştirmek için Enter tuşuna basın. Satır numarası sütununun üstünde soru işareti içeren turuncu bir simge görünür.

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

Kod satırı ayrılma noktalarını günlüğe kaydet

Yürütmeyi duraklatmadan ve console.log() çağrılarıyla kodunuzu karmaşık hale getirmeden mesajları Konsol'a kaydetmek için günlük kod satırı ayrılma noktalarını (günlük noktaları) kullanın.

Bir günlük noktası ayarlamak için:

1. Kaynaklar panelini açı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. Sağ tıklayın.
5. Günlük noktası ekle'yi seçin. Kod satırının altında bir iletişim kutusu görüntülenir.

6. İletişim kutusuna günlük mesajınızı girin. Bir console.log(message) çağrısıyla aynı söz dizimini kullanabilirsiniz.

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

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

   Bu durumda günlüğe kaydedilen ileti şu şekildedir:

   // 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ı ayrılma noktalarını devre dışı bırakmak, düzenlemek veya kaldırmak için Ayrılma 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 grubun adını tıklayın.
• Bir grubu veya ayrılma noktasını tek tek etkinleştirmek ya da devre dışı bırakmak için grubun veya ayrılma noktasının yanındaki simgesini tıklayın.
• Kaldırmak istediğiniz grubun üzerine gelip işaretini 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. Ayrı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ın.
• Dosyadaki tüm kesme noktalarını etkinleştir.
• Tüm ayrılma noktalarını kaldır (tüm dosyalarda).
• Diğer ayrılma noktalarını kaldırın (diğer gruplardaki).

Kesme noktalarını düzenle

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 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.
• Ayrılma noktasının üzerine gelin, düzenlemek için simgesini ve kaldırmak için simgesini tıklayın.

• Bir ayrılma 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 ayrılma noktalarını kaldırın (tüm dosyalarda).
  • Tüm ayrılma noktalarını kaldır (tüm dosyalarda).

Ç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.

"Hiçbir zaman burada duraklama" seçeneğiyle kesme noktalarını atlama

Başka nedenlerle oluşabilecek duraklatmaları atlamak için Asla burada duraklama kod satırı ayrılma noktası kullanın. Bu, istisna kesme noktalarını etkinleştirdiyseniz ancak hata ayıklayıcı, hata ayıklamayla ilgilenmediğiniz gürültülü bir istisnada sürekli duruyorsa yararlı olabilir.

Ara konumunu yoksaymak için:

1. Kaynaklar panelinde, kaynak dosyayı açın ve kesmek istemediğiniz satırı bulun.
2. Sol tarafta, araya neden olan ifadenin yanındaki satır numarası sütununda bulunan satır numarasını sağ tıklayın.
3. Açılır menüden Burada asla duraklatma'yı seçin. Satırın yanında turuncu (koşullu) bir ayrılma 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 seçeneğiyle hata ayıklayıcı ifadelerini ve kod satırı ayrılma noktaları ve Etkinlik işleyici ayrılma noktaları hariç diğer tüm kesme noktası türlerini yoksayabilirsiniz.

Duraklatılmaması gereken ifade, duraklatmaya neden olan ifadeden farklıysa hiçbir zaman burada duraklama seçeneği, birden fazla ifade içeren bir satırda başarısız olabilir. Kaynak eşlenen kodda her ayrılma noktası konumu, araya neden olan orijinal ifadeye karşılık gelmez.

DOM değişikliği ayrılma noktaları

Bir DOM düğümünü veya düğümünü değiştiren kodda duraklamak istediğinizde DOM değişikliği ayrılma noktası kullanın

DOM değişikliği ayrılma noktası ayarlamak için:

1. Elements sekmesini tıklayın.
2. Kesme noktasını ayarlamak istediğiniz öğeye gidin.
3. Öğeyi sağ tıklayın.
4. Duraklama açık'ın üzerine gelin, ardından Alt ağaç değişiklikleri, Özellik değişiklikleri veya Düğüm kaldırma.

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:

• Elements > DOM Ayrılma Noktaları bölmesi.
• Kaynaklar > DOM Ayrılma Noktaları yan bölmesi.

Bu sayfada şunları yapabilirsiniz:

• Bunları ile etkinleştirebilir veya devre dışı bırakabilirsiniz.
• Sağ tıklayın > Bunları DOM'de kaldırın veya gösterin.

DOM değişiklik ayrılma noktası türleri

• Alt ağaç değişiklikleri. Seçili düğümün bir alt öğesi kaldırıldığında veya veya bir alt yayıncının içeriğinin değiştirilmesi. Alt düğüm özelliği değişikliklerinde tetiklenmemesi veya geçerli olarak seçili düğümde yapılan tüm değişikliklerin üzerine yazılır.
• Özelliklerde yapılan değişiklikler: şu anda seçili olan düğümde veya bir özellik değeri değiştiğinde.
• Düğüm Kaldırma: Seçili düğüm kaldırıldığında tetiklenir.

XHR/fetch ayrılma noktaları

Bir XHR'nin istek URL'si belirtilen bir değer içerdiğinde kesmek istediğinizde XHR/fetch ayrılma noktası kullanın dize. Geliştirici Araçları, XHR'nin send() yöntemini çağırdığı kod satırında duraklar.

Bunun yararlı olabileceği bir örnek, sayfanızın yanlış bir URL istediğini görmenizdir. ve yanlış isteğe neden olan AJAX veya Getirme kaynak kodunu hızlı bir şekilde bulmak istiyorsanız.

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. Ayrılma noktası ekle'yi tıklayın.
4. Son eklemek istediğiniz dizeyi girin. Bu dize mevcut olduğunda Geliştirici Araçları duraklar XHR'nin istek URL'sinde herhangi bir yere yazın.
5. Onaylamak için Enter tuşuna basın.

Bu örnekte, şunu içeren herhangi bir istek için XHR/fetch Breakpoints içinde XHR/fetch ayrılma noktasının nasıl oluşturulacağı org değerini alır.

Etkinlik işleyici ayrılma noktaları

Bir tetiklenir. click gibi belirli etkinlikleri veya etkinlik kategorilerini (ör. tüm fare etkinliklerini kontrol eder.

1. Kaynaklar panelini tıklayın.
2. Etkinlik İşleyici Ayrılma Noktaları bölmesini genişletin. Geliştirici Araçları, şu gibi etkinlik kategorilerinin bir listesini gösterir: Animasyon olarak değiştirin.
3. İlgili kategoriden herhangi bir etkinlik tetiklendiğinde duraklatmak veya kategorinin kapsamını genişletmek için bu kategorilerden birini işaretleyin ve belirli bir etkinliği kontrol edin.

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

Ayrıca Hata Ayıklayıcı, Paylaşılan Depolama İş Akışları da dahil olmak üzere herhangi bir türdeki web çalışanlarında veya iş akışlarında gerçekleşen etkinlikleri duraklatır.

Bu örnekte, bir hizmet çalışanında gerçekleşen setTimer etkinliğinde duraklatılan Hata Ayıklayıcı gösterilmektedir.

Etkinlik işleyicilerin listesini Elements > Etkinlik İşleyiciler bölmesi.

İstisna ayrılma noktaları

Yakalanan veya devre dışı bırakan kod satırında duraklamak istediğinizde yakalanmamış istisna. Node.js dışındaki herhangi bir hata ayıklama oturumunda bu iki istisnayı 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, yürütme yakalanmamış bir istisnada duraklatıldı.

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

  

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

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

Yakalanan ve yakalanmamış onay kutularından biri veya her ikisi de etkinleştirildiğinde, Hata Ayıklayıcı hem eşzamanlı hem de eşzamansız çağrılarda karşılık gelen istisnalarda duraklatmayı dener. Eşzamansız durumda Hata Ayıklayıcı, ne zaman durması gerektiğini belirlemek için vaatler genelinde reddetme işleyicileri arar.

Yakalanan istisnalar ve yoksayılan kod

Yoksayma Listesi etkinken Hata Ayıklayıcı, yoksayılmayan çerçevelerde yakalanan veya çağrı yığınındaki böyle bir çerçeveden geçen istisnalarda duraklar.

Sonraki örnekte, yoksayılmayan mycode.js üzerinden geçen ve yoksayılan library.js tarafından atılan, yakalanmış bir istisnada duraklatılan Hata Ayıklayıcı gösterilmektedir.

Uç durumlarda Hata Ayıklayıcı davranışı hakkında daha fazla bilgi edinmek için bu demo sayfasındaki senaryo koleksiyonunu test edin.

İşlev ayrılma noktaları

Hata ayıklamak istediğiniz işlevde functionName olan debug(functionName) işlevini çağırın. belirli bir işlev çağrıldığında duraklatılır. Kodunuza debug() ekleyebilirsiniz (ör. console.log() ifadesi) veya Geliştirici Araçları Konsolu'ndan çağırın. debug(), şuna eşdeğerdir: işlevin ilk satırına bir kod satırı ayrılma noktası ekleyin.

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 kapsam dahilinde olduğundan emin olun

Hata ayıklamak istediğiniz işlev kapsam dahilinde değilse Geliştirici Araçları bir ReferenceError atar.

(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.

Geliştirici Araçları'ndan debug() işlevini çağırıyorsanız hedef işlevin kapsam dahilinde olduğundan emin olmak zor olabilir. Konsol. İşte bir strateji:

1. İşlevin kapsamında olduğu bir yere kod satırı ayrılma noktası ayarlayın.
2. Kesme noktasını tetikleyin.
3. Kod satırınızda kod hâlâ duraklatılmış durumdayken Geliştirici Araçları Konsolu'nda debug() adlı SDK'yı çağırın devam eder.

Güvenilir Türü ayrılma noktaları

Trusted Type API, güvenliğe karşı koruma sağlar siteler arası komut dosyası (XSS) saldırıları olarak bilinen kötüye kullanımlar.

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, havuz ihlali nedeniyle yürütme duraklatıldı.

• 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 bilgi:

• 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.