Event Listeners, bir event listener sahip her öğenin ana hatlarını çizer ve türüne göre renklendirilir (tıklama, fareyle üzerine gelme, kaydırma, dokunma, klavye ve form), her işleyicinin nereden geldiğini gösterir ve DOM değiştikçe öğeleri yanıp söner.
Bir şeyin neden tepki verdiğini veya tepki vermediğini anlamak genellikle sayfanın yanıtlayamayacağı bir soruyla başlar: Bu öğede bir tıklama işleyicisi var mı? Hangi öğe aslında fareyle üzerine gelme davranışına sahiptir? Kaydırarak dinlemek ve sayfayı kekelemek nedir? Hangi öğeyi seçeceğinizi zaten biliyorsanız, Tarayıcı DevTools aynı anda bir öğenin listeners listeleyebilir.
Bu araç tüm sayfaya ilişkin soruyu aynı anda yanıtlar. listener olan her öğe kendi türünün renginde bir taslak alır (tıklama, fareyle üzerine gelme, kaydırma, dokunma ve sürükleme, klavye veya form ve odak) ve birinin üzerine gelindiğinde tam olaylar ve her birinin nereden geldiği gösterilir: satır içi bir nitelik, bir mülk içi, bir React veya Vue işleyicisi, jQuery veya addEventListener. Kategori kutucukları her türü açıp kapatır ve altındaki liste her öğeyi adlandırır, böylece tek tıklamayla o öğeye kaydırılırsınız.
Çerçeveler doğru şekilde işlenir. React listeners root'a bağlar ve olayları dahili olarak gönderir; bu da tüm uygulamanın tıklanabilir görünmesini sağlar; araç, bu kök kayıtlarını bir kenara bırakır ve React işleyicilerini, bunları bildiren öğeler üzerinde gösterir. Hızlı taramanın yeniden yüklemeye ihtiyacı yoktur ve satır içi işleyiciler olan React, Vue ve jQuery kapsar. Araç açılmadan önce düz addEventListener ile eklenen Listeners yalnızca sayfa yüklemesinin başlangıcında görülebilir, bu nedenle Reload & record kayıt açıkken sayfayı bir kez yeniden yükler - daha sonra araç, window ve document sayfa düzeyindekiler de dahil olmak üzere her listener birlikte kendi kendine yeniden açılır.
İkinci sekme DOM'un kendisini izler. Eklenen veya kaldırılan her düğüm, nitelik değişikliği ve metin değişikliği sayfada yanıp söner, sayaçlar saniye başına mutasyonları gösterir ve bir liste, en çok değişen öğeleri ilgili niteliklerle birlikte sıralar. Kimse sayfaya dokunmadığında sürekli bir akış genellikle bir zamanlayıcı, JavaScript odaklı bir animasyon veya olması gerekenden daha fazla yeniden oluşturulan bir çerçeve anlamına gelir; bunlar tam olarak pilleri tüketen ve sayfaları kekeleyen şeylerdir.
Tıklama, fareyle üzerine gelme, kaydırma, dokunma, klavye ve form listeners sahip öğeler, her türü gösterecek veya gizleyecek kutucuklarla kendi renklerinde özetlenmiştir.
Satır içi nitelikler, özellikler, React ve Vue işleyicileri, jQuery olayları ve addEventListener çağrıları, her öğe üzerinde etiketlenmiştir.
React kök düzeyindeki listeners bir kenara bırakılır ve işleyicileri, uygulamanın tamamı yerine onları bildiren öğeler üzerinde gösterilir.
Reload & record yalnızca söz konusu yükleme için window ve document listeners de dahil olmak üzere sayfa yüklemesinin başlangıcından itibaren her addEventListener çağrısını yakalar.
Eklenen ve kaldırılan düğümler, nitelik değişiklikleri ve metin değişiklikleri, saniyede bir mutasyon sayacıyla birlikte sayfada yanıp söner.
En çok değişen öğelerin, ilgili niteliklerle birlikte sıralanmış bir listesi, doğrudan kontrolden çıkan yeniden oluşturmalara işaret ediyor.
Bir düğmenin gerçekten bir listener sahip olup olmadığını veya işleyicinin bunun yerine bir sarmalayıcı öğenin üzerinde olup olmadığını bir bakışta görün.
window ve document listeners de dahil olmak üzere kaydırma, tekerlek veya dokunma hareketini dinleyen her öğeyi bulun.
Hangi kontrollerin klavye olaylarına, hangilerinin yalnızca fareye yanıt verdiğini kontrol edin.
Sayfa boştayken mutasyon sayacını izleyin; Sürekli değişen öğeler, fazladan iş yapan bir zamanlayıcıya veya çerçeveye işaret eder.
Hangi bölümlerin etkileşimli olduğunu ve hangi çerçevenin bunları birbirine bağladığını görmek için yabancı bir sitenin etrafında gezinin.
DevSuite Pro dock'taki Event Listeners simgesine tıklayın. Hızlı tarama anında çalışır ve bulduğu her öğenin ana hatlarını çizer.
Olaylarını ve kaynaklarını görmek için özetlenen herhangi bir öğenin üzerine gelin. Yalnızca tıklama, fareyle üzerine gelme veya kaydırma listeners göstermek için kategori kutucuklarını kullanın.
Kayıt açıkken sayfayı bir kez yeniden yüklemek için Reload & record basın. Araç kendi kendine yeniden açılır ve artık her addEventListener çağrısını içerir.
Sayfayı o öğeye kaydırmak ve onu flaşlamak için listedeki bir satırı tıklayın. Copy report size tam listeyi metin olarak verir.
DOM mutations sekmesini açın ve sayfayı kullanın. Değişen öğeler yanıp sönüyor ve en yoğun olanlar listenin en üstüne çıkıyor.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 74'dan fazla geliştirici aracının kilidini açın.
