Ayrılma noktalarıyla kodunuzu duraklatma

Kayce Basques

Sofia Emelianova

JavaScript kodunuzu duraklatmak için kesme noktalarını kullanın. Bu kılavuzda, DevTools'ta 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ında kesme noktası ayarlamak için:

1. Kaynaklar panelini tıklayın.
2. Kesmek 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 ayarlanan 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ı kesme noktası kullanın.

Bu tür kesme noktaları, özellikle bir 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. Kesmek 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.

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

1. Kaynaklar panelini açın.
2. Kesmek 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 şunları 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 kesme noktalarını atlama

Diğer 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.

Yürütme duraklatılmışken kesme noktasını da susturabilirsiniz. İş 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 kesme noktası konumu, ara vermeye neden olan orijinal ifadeye karşılık gelmez.

DOM değişiklik kesme noktaları

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

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

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 durma noktası oluşturmaya yönelik bağlam menüsü gösterilmektedir.

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

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