Event Listeners apibūdina kiekvieną elementą, turintį event listener, nuspalvintą pagal rūšį – spustelėjimą, užvedimą, slinkimą, palietimą, klaviatūrą ir formą – rodo, iš kur kilo kiekviena tvarkytoja, ir mirksi elementai, kai keičiasi DOM.
Išsiaiškinus, kodėl kažkas reaguoja arba nereaguoja, paprastai pradedama nuo klausimo, kurio puslapis neatsakys: ar iš viso yra šio elemento paspaudimų tvarkyklė? Kuriam elementui iš tikrųjų priklauso užvedimo funkcija? Kas yra klausytis slinkimo ir puslapio mikčiojimo? Naršyklės DevTools vienu metu gali išvardyti vieno elemento listeners, jei jau žinote, kurį elementą pasirinkti.
Šis įrankis vienu metu atsako į viso puslapio klausimą. Kiekvienas elementas su listener gauna atitinkamos spalvos kontūrą – spustelėkite, užveskite pelės žymeklį, slinkite, palieskite ir vilkite, klaviatūra arba formuokite ir sufokusuokite, o užvedus pelės žymeklį rodomi tikslūs įvykiai ir iš kur jie kilo: eilutinis atributas, nuosavybė, React arba Vue tvarkyklė, jQuery arba addEventListener. Kategorijų plytelės įjungia ir išjungia kiekvieną rūšį, o apačioje esančiame sąraše įvardijami kiekvienas elementas, todėl vienu spustelėjimu pasieksite jį.
Karkasai tvarkomi tinkamai. React priskiria savo listeners prie šaknies ir siunčia įvykius viduje, todėl visa programa atrodytų spustelėjama; įrankis atideda šias šaknines registracijas ir parodo juos deklaruojančių elementų React tvarkykles. Greitojo nuskaitymo nereikia įkelti iš naujo ir jis apima tiesiogines tvarkykles, React, Vue ir jQuery. Listeners pridėtus naudojant paprastą addEventListener prieš atidarant įrankį, galima matyti tik nuo puslapio įkėlimo pradžios, todėl Reload & record iš naujo įkelia puslapį vieną kartą įjungus įrašymą – tada įrankis atsidaro pats, įtraukiant kiekvieną listener, puslapio lygio ir window bei document.
Antrasis skirtukas stebi patį DOM. Kiekvienas pridėtas ar pašalintas mazgas, atributo pakeitimas ir teksto pakeitimas mirksi puslapyje, skaitikliai rodo mutacijas per sekundę, o sąraše surikiuojami labiausiai besikeičiantys elementai su susijusiais atributais. Nuolatinis srautas, kol niekas neliečia puslapio, paprastai reiškia laikmatį, JavaScript pagrįstą animaciją arba sistemą, perteikiančią daugiau nei turėtų – būtent tai, dėl ko išeikvojamos baterijos ir mikčioja puslapiai.
Elementai su spustelėjimu, užvedimu, slinkimu, lietimu, klaviatūra ir formų listeners kontūruojami savo spalva, o kiekvienos rūšies plytelės rodomos arba slepiamos.
Įterpti atributai, ypatybės, React ir Vue tvarkyklės, jQuery įvykiai ir addEventListener iškvietimai, pažymėti kiekviename elemente.
React “ šakninio lygio listeners atidedami, o jo tvarkyklės rodomos juos deklaruojančiuose elementuose, o ne visoje programoje.
Reload & record kiekvieną addEventListener iškvietimą nuo puslapio įkėlimo pradžios, įskaitant window ir document listeners, tik tą vieną įkėlimą.
Puslapyje mirksi pridėti ir pašalinti mazgai, atributų pakeitimai ir teksto pakeitimai su mutacijų per sekundę skaitikliu.
Elementų, kurie labiausiai keičiasi, sąrašas su atitinkamais atributais nukreipia tiesiai į pabėgusius pakartotinius pateikimus.
Vienu žvilgsniu sužinokite, ar mygtukas iš tikrųjų turi listener, ar tvarkyklė sėdi ant apvyniojimo elemento.
Raskite kiekvieną elementą, klausantį slinkimo, ratuko ar judesio liečiamu judesiu, įskaitant listeners window ir document.
Patikrinkite, kurie valdikliai reaguoja į klaviatūros įvykius, o kurie – tik į pelę.
Stebėkite mutacijų skaitiklį, kol puslapis neveikia; elementai, kurie nuolat keičiasi, nurodo laikmatį arba sistemą, atliekančią papildomą darbą.
Užveskite pelės žymeklį aplink nepažįstamą svetainę, kad pamatytumėte, kurios dalys yra interaktyvios ir kuri sistema jas prijungė.
Spustelėkite Event Listeners piktogramą DevSuite Pro doke. Greitas nuskaitymas paleidžiamas nedelsiant ir apibrėžiamas kiekvienas rastas elementas.
Užveskite pelės žymeklį bet kurio kontūro elemento, kad pamatytumėte jo įvykius ir jų šaltinius. Naudokite kategorijų plyteles, kad būtų rodomi tik spustelėję, užvedę pelės žymeklį arba slinkantys listeners.
Paspauskite Reload & record, kad vieną kartą iš naujo įkeltumėte puslapį įjungus įrašymą. Įrankis vėl atsidaro pats ir dabar apima kiekvieną addEventListener skambutį.
Spustelėkite eilutę sąraše, kad slinktumėte puslapiu iki to elemento ir jį suaktyvintumėte. Copy report pateikiamas visas sąrašas kaip tekstas.
Atidarykite DOM mutations skirtuką ir naudokite puslapį. Besikeičiantys elementai mirksi, o aktyviausi pakyla į sąrašo viršų.
Įdiekite „DevSuite Pro“ nemokamai ir atrakinkite 74+ kūrėjų įrankius savo naršyklei.
