Event Listeners menguraikan setiap elemen yang memiliki event listener, diwarnai menurut jenisnya — klik, arahkan kursor, gulir, sentuh, keyboard, dan formulir — menunjukkan dari mana setiap pengendali berasal, dan menampilkan elemen saat DOM berubah.
Mencari tahu mengapa sesuatu bereaksi — atau tidak — biasanya dimulai dengan pertanyaan yang tidak dapat dijawab oleh halaman: apakah ada pengendali klik pada elemen ini? Elemen manakah yang sebenarnya memiliki perilaku hover? Apa yang dimaksud dengan mendengarkan menggulir dan membuat halaman tersendat? Browser DevTools dapat mencantumkan listeners satu elemen dalam satu waktu, jika Anda sudah mengetahui elemen mana yang harus dipilih.
Alat ini menjawab pertanyaan untuk seluruh halaman sekaligus. Setiap elemen dengan listener mendapatkan garis luar sesuai warnanya - klik, arahkan kursor, gulir, sentuh dan seret, keyboard, atau bentuk dan fokus - dan arahkan kursor ke satu titik menunjukkan peristiwa persisnya dan dari mana masing-masing berasal: atribut sebaris, properti di properti, pengendali React atau Vue, jQuery, atau addEventListener. Ubin kategori mengaktifkan dan menonaktifkan setiap jenis, dan daftar di bawahnya memberi nama setiap elemen, jadi satu klik akan menggulir Anda ke sana.
Kerangka kerja ditangani dengan benar. React menempelkan listeners ke root dan mengirimkan event secara internal, yang akan membuat keseluruhan aplikasi terlihat dapat diklik; alat ini mengesampingkan pendaftaran root tersebut dan menampilkan penangan React pada elemen yang mendeklarasikannya. Pemindaian cepat tidak perlu memuat ulang dan mencakup penangan inline, React, Vue dan jQuery. Listeners yang ditambahkan dengan addEventListener biasa sebelum alat dibuka hanya dapat dilihat dari awal pemuatan halaman, jadi Reload & record memuat ulang halaman satu kali dengan perekaman aktif — alat kemudian membuka kembali dengan sendirinya dengan setiap listener disertakan, juga yang tingkat halaman di window dan document.
Tab kedua mengawasi DOM itu sendiri. Setiap node yang ditambahkan atau dihapus, perubahan atribut dan perubahan teks muncul di halaman, penghitung menunjukkan mutasi per detik, dan daftar memberi peringkat pada elemen yang paling banyak berubah, dengan atribut yang terlibat. Aliran yang stabil saat tidak ada orang yang menyentuh halaman biasanya berarti pengatur waktu, animasi berbasis JavaScript, atau kerangka kerja yang dirender ulang lebih dari yang seharusnya — hal-hal yang menguras baterai dan membuat halaman tersendat.
Elemen dengan klik, arahkan kursor, gulir, sentuh, keyboard, dan listeners formulir diberi garis tepi dalam warnanya sendiri, dengan ubin untuk menampilkan atau menyembunyikan setiap jenisnya.
Atribut inline, properti-on, penangan React dan Vue, event jQuery, dan panggilan addEventListener, diberi label pada setiap elemen.
listeners tingkat akar React dikesampingkan, dan penangannya ditampilkan pada elemen yang mendeklarasikannya, bukan pada keseluruhan aplikasi.
Reload & record menangkap setiap panggilan addEventListener dari awal pemuatan halaman, termasuk listeners window dan document, untuk satu pemuatan tersebut saja.
Node yang ditambahkan dan dihapus, perubahan atribut dan perubahan teks muncul di halaman, dengan penghitung mutasi per detik.
Daftar peringkat elemen yang paling banyak berubah, dengan atribut yang terlibat, mengarah langsung pada perenderan ulang yang tidak terkendali.
Lihat sekilas apakah suatu tombol benar-benar memiliki listener, atau apakah pengendalinya berada pada elemen pembungkus.
Temukan setiap elemen yang mendengarkan gulir, roda, atau gerakan sentuh, termasuk listeners di window dan document.
Periksa kontrol mana yang merespons aktivitas keyboard dan mana yang hanya merespons mouse.
Perhatikan penghitung mutasi saat halaman tidak digunakan; elemen yang terus berubah menunjuk ke pengatur waktu atau kerangka kerja yang melakukan pekerjaan ekstra.
Arahkan kursor ke situs asing untuk melihat bagian mana yang interaktif dan kerangka mana yang menghubungkannya.
Klik ikon Event Listeners di dok DevSuite Pro. Pemindaian cepat segera dijalankan dan menguraikan setiap elemen yang ditemukan.
Arahkan kursor ke elemen yang digariskan untuk melihat peristiwa dan sumbernya. Gunakan ubin kategori untuk hanya menampilkan listeners klik, arahkan kursor, atau gulir.
Tekan Reload & record untuk memuat ulang halaman sekali dengan perekaman aktif. Alat ini terbuka kembali dengan sendirinya dan sekarang menyertakan setiap panggilan addEventListener.
Klik salah satu baris dalam daftar untuk menggulir halaman ke elemen tersebut dan mem-flash-nya. Copy report memberi Anda daftar lengkap sebagai teks.
Buka tab DOM mutations dan gunakan halaman tersebut. Perubahan elemen akan terjadi dengan cepat, dan elemen tersibuk akan muncul di urutan teratas daftar.
Instal DevSuite Pro secara gratis dan buka 74+ alat pengembang untuk browser Anda.
