Bu sayfa, Cloud Translation API ile çevrilmiştir.

Ayrılma noktalarıyla kodunuzu duraklatma

Kayce Basques

Sofia Emelianova

JavaScript kodunuzu duraklatmak için kesme noktalarını kullanın. Bu kılavuzda, Geliştirici Araçları'nda bulunan ayrılma noktası türlerinin yanı sıra her bir türün 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ıklamalarını Kullanmaya 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 ayrılma noktası türü kod satırıdır. Ancak, özellikle tam olarak nereye bakacağınızı bilmiyorsanız veya büyük bir kod tabanıyla çalışıyorsanız kod satırı ayrılma noktalarının ayarlanması verimsiz olabilir. Diğer ayrılma noktası türlerini nasıl ve ne zaman kullanacağınızı bilerek hata ayıklama sırasında zamandan tasarruf edebilirsiniz.

Kesme Noktası Türü	Aşağıdaki işlemleri yapmak istediğinizde bunu kullanın:
Kod satırı	Kodun tam olarak belirtilen bir bölgesinde duraklatın.
Koşullu kod satırı	Kodun belirli bir bölgesinde duraklat, ancak başka bir koşul doğru olduğunda.
Günlük noktası	Yürütmeyi duraklatmadan bir iletiyi Konsola kaydedin.
DOM	Belirli bir DOM düğümünü veya alt öğelerini değiştiren ya da kaldıran kod üzerinde duraklatma.
HR	Bir XHR URL'si dize kalıbı içerdiğinde duraklatılır.
Etkinlik işleyici	`click` gibi bir etkinlik tetiklendikten sonra çalıştırılan kodda duraklatma.
İstisna	Yakalanan veya yakalanmamış bir istisnaya neden olan kod satırında duraklayın.
İşlev	Belirli bir işlev çağrıldığında duraklatılır.
Güvenilir Tür	Güvenilir Tür ihlalleride duraklatın.

Kod satırı ayrılma noktaları

İncelemeniz gereken kodun bölgesini kesin olarak biliyorsanız bir kod satırı ayrılma noktası kullanın. DevTools her zaman bu kod satırı yürütülmeden önce duraklar.

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

Kaynaklar sekmesini tıklayın.
Kesmek istediğiniz kod satırını içeren dosyayı açın.
Kod satırına gidin.
Kod satırının solunda satır numarası sütunu bulunur. Bu öğeyi tıklayın. Satır numarası sütununun üstünde mavi bir simge belirir.

Kod satırı ayrılma noktası.

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

Kodunuzdaki kod satırı kesme noktaları

Bu satırda duraklatmak için kodunuzdan debugger numaralı telefonu arayın. Bu, kod satırı ayrılma noktasına eşdeğerdir. Tek fark, ayrılma noktasının Geliştirici Araçları 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ı

Yalnızca bazı koşullar doğru olduğunda yürütmeyi durdurmak istediğinizde koşullu kod satırı ayrılma noktası kullanın.

Bu tür ayrılma noktaları, sizin durumunuzla ilgili olmayan araları (özellikle bir döngüde) atlamak istediğinizde kullanışlıdır.

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

Kaynaklar sekmesini açın.
Kesmek istediğiniz kod satırını içeren dosyayı açın.
Kod satırına gidin.
Kod satırının solunda satır numarası sütunu bulunur. Öğeyi sağ tıklayın.
Koşullu kesme noktası ekle'yi seçin. Kod satırının altında bir iletişim kutusu görüntülenir.
İletişim kutusuna koşulunuzu girin.
Kesme noktasını etkinleştirmek için Enter tuşuna basın. Satır numarası sütununun üstünde üzerinde soru işareti olan turuncu bir simge görünür.

Koşullu kod satırı ayrılma noktası.

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

Kod satırı kesme 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:

Kaynaklar sekmesini açın.
Kesmek istediğiniz kod satırını içeren dosyayı açın.
Kod satırına gidin.
Kod satırının solunda satır numarası sütunu bulunur. Öğeyi sağ tıklayın.
Günlük noktası ekle'yi seçin. Kod satırının altında bir iletişim kutusu görüntülenir.
İletişim kutusuna günlük mesajınızı girin. 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 alınan ileti aşağıdaki gibi olur:
```
// str = "test"
// num = 3
// obj = {attr: "x"}
A string 42 true TEST {attr: 'x'}
```
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.

Console'a bir dize ve değişken değeri kaydeden günlük noktası.

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

Kod satırı kesme 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ölmesini kullanın.

Ayrılma noktası gruplarını düzenle

Ayrılma noktaları bölmesi, kesme noktalarını dosyaya göre gruplandırıp satır ve sütun numaralarına göre sıralar. Gruplarla aşağıdakileri 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.
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ı tek tek veya gruplara göre nasıl devre dışı bırakacağınız ya da etkinleştireceğiniz gösterilmektedir. Bir ayrılma noktasını devre dışı bıraktığınızda Kaynaklar paneli, satır numarasının yanındaki işaretçiyi şeffaf hale getirir.

Grupların içerik menüleri vardır. Ayrılma noktaları bölmesinde bir grubu sağ tıklayın ve aşağıdaki seçeneklerden birini belirleyin:

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ştirin.
Tüm kesme noktalarını (tüm dosyalarda) kaldırın.
Diğer ayrılma noktalarını kaldırın (diğer gruplarda).

Kesme noktalarını düzenle

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

Bir kesme noktasını etkinleştirmek veya devre dışı bırakmak için yanındaki işaretini 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çiyi şeffaf hale getirir.
Bir ayrılma noktasının üzerine gelip düzenlemek için simgesini, kaldırmak içinse 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.
Ayrılma noktasını sağ tıklayarak bağlam menüsünü görüntüleyin ve seçeneklerden birini belirleyin:
- Konumu göster.
- Koşulu veya günlük noktasını düzenleyin.
- Tüm kesme noktalarını etkinleştir.
- Tüm kesme noktalarını devre dışı bırak.
- Kesme noktasını kaldır.
- Diğer ayrılma noktalarını kaldırın (tüm dosyalarda).
- Tüm kesme noktalarını (tüm dosyalarda) kaldırın.

Çeşitli ayrılma noktası düzenlemelerini çalışırken görmek için videoyu izleyin: devre dışı bırakma, kaldırma, koşulu düzenleme, menüden konumu gösterme ve değişiklik türü.

DOM değişikliği 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 ayrılma noktası ayarlamak için:

Öğeler sekmesini tıklayın.
Kesme noktasını ayarlamak istediğiniz öğeye gidin.
Öğeyi sağ tıklayın.
Fareyle Kesme tarihi'nin üzerine gelin, ardından Alt ağaç değişiklikleri, Özellik değişiklikleri veya Düğüm kaldırma'yı seçin.

Bu örnekte, DOM değişiklik ayrılma noktası oluşturmak için kullanılan içerik menüsü gösterilmektedir.

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

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

Nesneler ve Kaynaklar panellerindeki DOM Ayrılma Noktaları Listeleri.

Bu sayfada şunları yapabilirsiniz:

Bunları ile etkinleştirin veya devre dışı bırakın.
Sağ tıklayın > Kaldır veya Göster'i seçin.

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

Alt ağaç değişiklikleri. Geçerli olarak seçilmiş 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ştiğinde veya seçili düğümde herhangi bir değişiklik yapıldığında tetiklenmez.
Özellik değişiklikleri: O 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: Geçerli olarak seçili düğüm kaldırıldığında tetiklenir.

XHR/fetch ayrılma noktaları

XHR'nin istek URL'si, belirtilen bir dizeyi içerdiğinde bozulmak istiyorsanız bir XHR/fetch ayrılma noktası kullanın. Geliştirici Araçları, XHR'nin send() yöntemini çağırdığı kod satırında duraklar.

Sayfanızın yanlış bir URL istediğini görmeniz ve yanlış isteğe neden olan AJAX veya Fetch kaynak kodunu hızlı bir şekilde bulmak istemeniz, bunun faydalı olacağı durumlara örnek olarak gösterilebilir.

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

Kaynaklar sekmesini tıklayın.
XHR Ayrılma Noktaları bölmesini genişletin.
Ayrılma noktası ekle'yi tıklayın.
Kesmek istediğiniz dizeyi girin. Geliştirici Araçları, bu dize XHR istek URL'sinin herhangi bir yerinde olduğunda duraklar.
Onaylamak için Enter'a basın.

XHR/fetch ayrılma noktası oluşturma.

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

Etkinlik işleyici ayrılma noktaları

Bir etkinlik tetiklendikten sonra çalışan etkinlik işleyici kodunda duraklatma yapmak 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.

Kaynaklar sekmesini tıklayın.
Etkinlik İşleyici Ayrılma Noktaları bölmesini genişletin. Geliştirici Araçları, Animasyon gibi etkinlik kategorilerinin bir listesini gösterir.
Söz konusu kategorideki herhangi bir etkinlik tetiklendiğinde duraklatmak için bu kategorilerden birini işaretleyin veya kategoriyi genişletip belirli bir etkinliği kontrol edin.

Etkinlik işleyici ayrılma noktası oluşturuluyor.

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

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

Debugger, bir hizmet çalışanının etkinliğinde duraklatıldı.

Bu örnekte, bir Service Worker'da gerçekleşen setTimer etkinliğinde duraklatılan Hata Ayıklayıcı gösterilmektedir.

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

İstisna kesme noktaları

Yakalanan veya yakalanmamış bir istisnaya yol açan kod satırında duraklamak istediğinizde istisna kesme noktalarını kullanın. Node.js dışındaki herhangi bir hata ayıklama oturumlarında, bu tür istisnaların her ikisinde de bağımsız olarak duraklatabilirsiniz.

Kaynaklar sekmesinin Kesme noktaları bölmesinde, aşağıdaki seçeneklerden birini veya her ikisini etkinleştirin, ardından kodu yürütün:

Yakalanamayan istisnalarda duraklat'ı işaretleyin.

Bu örnekte, yürütme yakalanmamış bir istisnada duraklatılmıştır.
Yakalanan istisnalarda duraklat'ı işaretleyin.

Bu örnekte, yürütme yakalanan bir istisnada duraklatılmıştır.

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

Yakalanan ve yakalanmamış onay kutularından biri veya her ikisi de etkinken Hata Ayıklayıcı, hem eşzamanlı hem de eşzamansız çağrılarda ilgili istisnalarda duraklamaya çalışır. Eşzamansız durumda Hata Ayıklayıcı, ne zaman durdurulacağını belirlemek için sözler 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ında böyle bir çerçeveden geçen istisnalarda duraklar.

Sonraki örnekte, yoksayılanlar mycode.js üzerinden geçen yok sayılan library.js tarafından yakalanan bir istisnada duraklatılan Hata Ayıklayıcı gösterilmektedir.

Çağrı yığınında yoksayılmayan bir çerçeveden geçen yakalanmış bir istisnada duraklatılır.

Uç durumlardaki Hata Ayıklayıcı davranışı hakkında daha fazla bilgi edinmek için bu demo sayfasında bir dizi senaryoyu test edin.

İşlev ayrılma noktaları

Belirli bir işlev çağrıldığında duraklatmak istediğinizde, debug(functionName) işlevini çağırın. Burada functionName, hata ayıklamak istediğiniz işlevdir. debug() kodunu kodunuza ekleyebilir (console.log() ifadesi gibi) veya Geliştirici Araçları Konsolu'ndan çağırabilirsiniz. debug(), işlevin ilk satırında kod satırı ayrılma 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 kapsam dahilinde olduğundan emin olun

Hata ayıklamak istediğiniz işlev kapsam dışındaysa 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ı Konsolu'ndan debug() çağırıyorsanız hedef işlevin kapsam dahilinde olduğundan emin olmak zor olabilir. İşte bir strateji:

İşlevin kapsam dahilinde olduğu bir yere kod satırı ayrılma noktası ayarlayın.
Kesme noktasını tetikleyin.
Kod, kod satırı ayrılma noktanızda duraklatılmış durumdayken Geliştirici Araçları Konsolu'nda debug() çağrısı yapın.

Güvenilir Tür ayrılma noktaları

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

Anahtar terim: DOM tabanlı siteler arası komut dosyası, kullanıcı tarafından kontrol edilen bir kaynaktan (kullanıcı adı veya URL parçasından alınan yönlendirme URL'si gibi) rastgele JavaScript kodu yürütebilen eval() gibi bir işlev veya .innerHTML gibi bir özellik belirleyici olan bir havuza ulaştığında gerçekleşir.

Kaynaklar sekmesinin Kesme Noktaları bölmesinde, İGP İhlali Ayrılma Noktaları bölümüne giderek aşağıdaki seçeneklerden birini veya her ikisini birden etkinleştirin, ardından kodu yürütün:

Havuz İhlalleri'ne göz atın.

Bu örnekte, yürütme havuz ihlali nedeniyle duraklatılmıştır.
Politika İhlalleri'ne göz atın.

Bu örnekte, bir politika ihlali üzerine yürütme duraklatılmıştır. Trusted Type politikaları trustedTypes.createPolicy kullanılarak ayarlanır.

API'yi kullanma hakkında daha fazla bilgi edinebilirsiniz:

Güvenlik hedeflerinizi daha da ileriye taşımak için Güvenilir Türler ile DOM tabanlı siteler arası komut dosyası 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.