Event Listeners menggariskan setiap elemen yang mempunyai event listener, diwarnakan mengikut jenis — klik, tuding, tatal, sentuh, papan kekunci dan bentuk — menunjukkan dari mana setiap pengendali datang dan memancarkan elemen apabila DOM berubah.
Mencari sebab sesuatu bertindak balas — atau tidak — biasanya bermula dengan soalan yang halaman tidak akan menjawab: adakah terdapat pengendali klik pada elemen ini sama sekali? Unsur yang manakah sebenarnya memiliki gelagat tuding? Apakah yang dimaksudkan dengan mendengar tatal dan membuat halaman tergagap? DevTools Penyemak Imbas boleh menyenaraikan listeners satu elemen pada satu masa, jika anda sudah tahu elemen mana yang hendak dipilih.
Alat ini menjawab soalan untuk seluruh halaman sekaligus. Setiap elemen dengan listener mendapat garis besar dalam warna seumpamanya — klik, tuding, tatal, sentuh dan seret, papan kekunci atau bentuk dan fokus — dan menuding satu menunjukkan peristiwa yang tepat dan dari mana setiap datangnya: atribut sebaris, pada harta, pengendali React atau Vue, jQuery atau addEventListener. Jubin kategori menghidupkan dan mematikan setiap jenis, dan senarai di bawah menamakan setiap elemen, jadi satu klik menatal anda kepadanya.
Rangka kerja dikendalikan dengan betul. React melampirkan listeners pada akar dan menghantar acara secara dalaman, yang akan menjadikan keseluruhan apl kelihatan boleh diklik; alat itu mengetepikan pendaftaran akar tersebut dan menunjukkan pengendali React pada elemen yang mengisytiharkannya. Imbasan pantas tidak memerlukan muat semula dan meliputi pengendali sebaris, React, Vue dan jQuery. Listeners ditambah dengan addEventListener biasa sebelum alat dibuka hanya boleh dilihat dari permulaan pemuatan halaman, jadi Reload & record memuatkan semula halaman sekali dengan rakaman dihidupkan — alat itu kemudian dibuka semula dengan sendirinya dengan setiap listener disertakan, peringkat halaman pada window dan document juga.
Tab kedua menonton DOM itu sendiri. Setiap nod yang ditambah atau dialih keluar, perubahan atribut dan perubahan teks berkelip pada halaman, pembilang menunjukkan mutasi sesaat, dan senarai menyusun elemen yang paling banyak berubah, dengan atribut yang terlibat. Strim yang mantap semasa tiada sesiapa menyentuh halaman biasanya bermaksud pemasa, animasi dipacu JavaScript atau rangka kerja yang memaparkan semula lebih daripada yang sepatutnya — perkara yang menguras bateri dan membuat halaman tergagap.
Elemen dengan klik, tuding, tatal, sentuh, papan kekunci dan listeners borang digariskan dalam warnanya sendiri, dengan jubin untuk menunjukkan atau menyembunyikan setiap jenis.
Atribut sebaris, on-properties, pengendali React dan Vue, acara jQuery dan panggilan addEventListener, dilabelkan pada setiap elemen.
listeners peringkat akar React diketepikan dan pengendalinya ditunjukkan pada elemen yang mengisytiharkannya dan bukannya pada keseluruhan apl.
Reload & record menangkap setiap panggilan addEventListener dari permulaan pemuatan halaman, termasuk listeners window dan document, untuk satu pemuatan itu sahaja.
Menambah dan mengalih keluar nod, perubahan atribut dan perubahan teks berkelip pada halaman, dengan pembilang mutasi setiap saat.
Senarai berperingkat bagi elemen yang paling banyak berubah, dengan atribut yang terlibat, menunjuk terus pada pemaparan semula yang melarikan diri.
Lihat sepintas lalu sama ada butang benar-benar mempunyai listener atau sama ada pengendali diletakkan pada elemen pembalut sebaliknya.
Cari setiap elemen yang mendengar tatal, roda atau gerakan sentuh, termasuk listeners pada window dan document.
Semak kawalan yang bertindak balas kepada acara papan kekunci dan yang hanya bertindak balas kepada tetikus.
Tonton kaunter mutasi semasa halaman melahu; elemen yang terus berubah titik kepada pemasa atau rangka kerja yang melakukan kerja tambahan.
Tuding di sekitar tapak yang tidak dikenali untuk melihat bahagian mana yang interaktif dan rangka kerja yang menghubungkannya.
Klik ikon Event Listeners dalam dok DevSuite Pro. Imbasan pantas dijalankan serta-merta dan menggariskan setiap elemen yang ditemuinya.
Tuding mana-mana elemen yang digariskan untuk melihat peristiwa dan sumbernya. Gunakan jubin kategori untuk menunjukkan hanya listeners klik, tuding atau tatal.
Tekan Reload & record untuk memuat semula halaman sekali dengan rakaman dihidupkan. Alat ini dibuka semula dengan sendirinya dan kini termasuk setiap panggilan addEventListener.
Klik baris dalam senarai untuk menatal halaman ke elemen itu dan kilatkannya. Copy report memberikan anda senarai penuh sebagai teks.
Buka tab DOM mutations dan gunakan halaman tersebut. Menukar elemen berkelip, dan elemen yang paling sibuk naik ke bahagian atas senarai.
Pasang DevSuite Pro secara percuma dan buka 74+ alat pembangun untuk pelayar anda.
