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.
Kesme Noktası Türü | Aşağıdaki durumlarda bu seçeneği kullanın: |
---|---|
Kod satırı | Kodun belirli bir bölgesini duraklatın. |
Koşullu kod satırı | Kodun belirli bir bölgesinde yalnızca başka bir koşul doğru olduğunda duraklatın. |
Günlük noktası | Yürütmeyi duraklatmadan Konsol'a bir ileti kaydedin. |
DOM | Belirli bir DOM düğümünü veya alt öğelerini değiştiren ya da kaldıran kodda duraklayın. |
XHR | Bir XHR URL'si dize kalıbı içerdiğinde duraklatılır. |
Etkinlik işleyici | click gibi bir etkinlik tetiklendikten sonra çalışan kodda duraklatma. |
İstisna | Yakalanan veya yakalanmamış bir istisnayı atan 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 ihlallerinde duraklatı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:
- Kaynaklar panelini tıklayın.
- Sonlandırmak 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 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:
- Kaynaklar panelini açın.
- Sonlandırmak 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. 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 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:
- Kaynaklar panelini açın.
- Sonlandırmak 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. 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. 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'}
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:
- Kaynaklar panelinde, kaynak dosyayı açın ve kesmek istemediğiniz satırı bulun.
- Sol tarafta, araya neden olan ifadenin yanındaki satır numarası sütununda bulunan satır numarasını sağ tıklayın.
- 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:
- Elements sekmesini tıklayın.
- Kesme noktasını ayarlamak istediğiniz öğeye gidin.
- Öğeyi sağ tıklayın.
- 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:
- Kaynaklar panelini tıklayın.
- XHR Breakpoints (XHR Ayrılma Noktaları) bölmesini genişletin.
- Ayrılma noktası ekle'yi tıklayın.
- 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.
- 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.
- Kaynaklar panelini tıklayın.
- 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.
- İ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:
- İşlevin kapsamında olduğu bir yere kod satırı ayrılma noktası ayarlayın.
- Kesme noktasını tetikleyin.
- 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.