Event Listeners ocrtavaju svaki element koji ima event listener, obojani prema vrsti — klik, lebdenje, pomicanje, dodir, tipkovnica i obrazac — pokazuju odakle dolazi svaki rukovatelj i trepću elementi kako se DOM mijenja.
Određivanje zašto nešto reagira - ili ne - obično počinje pitanjem na koje stranica neće odgovoriti: postoji li uopće rukovatelj klikovima na ovom elementu? Koji element zapravo posjeduje ponašanje lebdenja? Što je slušanje pomicanja i zastajkivanje stranice? Browser DevTools može navesti listeners jednog po jednog elementa, ako već znate koji element odabrati.
Ovaj alat odgovara na pitanje za cijelu stranicu odjednom. Svaki element s listener dobiva obris u boji svoje vrste — klik, lebdenje, pomicanje, dodir i povlačenje, tipkovnica ili oblik i fokus — a lebdenje prikazuje točne događaje i odakle je svaki došao: ugrađeni atribut, on-property, React ili Vue rukovatelj, jQuery ili addEventListener. Pločice kategorija uključuju i isključuju svaku vrstu, a popis ispod imenuje svaki element, tako da se jednim klikom pomičete do njega.
S okvirima se pravilno rukuje. React pripaja svoje listeners rootu i šalje događaje interno, što bi učinilo da cijela aplikacija izgleda klikabilno; alat ostavlja te root registracije po strani i prikazuje React rukovatelje na elementima koji ih deklariraju. Brzo skeniranje ne treba ponovno učitavanje i pokriva ugrađene rukovatelje, React, Vue i jQuery. Listeners dodani pomoću običnog addEventListener prije otvaranja alata mogu se vidjeti samo od početka učitavanja stranice, tako da Reload & record ponovno učitava stranicu jednom uz uključeno snimanje — alat se zatim sam ponovno otvara sa uključenim svakim listener, onima na razini stranice u window i document.
Druga kartica prati sam DOM. Svaki dodani ili uklonjeni čvor, promjena atributa i promjena teksta treperi na stranici, brojači pokazuju mutacije u sekundi, a popis rangira elemente koji se najviše mijenjaju, s uključenim atributima. Stabilan tok dok nitko ne dira stranicu obično znači mjerač vremena, animaciju vođenu JavaScriptom ili okvir koji se ponovno prikazuje više nego što bi trebao - upravo ono što prazni baterije i uzrokuje zapinjanje stranica.
Elementi s listeners klika, lebdenja, pomicanja, dodira, tipkovnice i obrasca ocrtani su vlastitom bojom, s pločicama za prikaz ili skrivanje svake vrste.
Inline atributi, on-properties, React i Vue rukovatelji, jQuery događaji i addEventListener pozivi, označeni na svakom elementu.
React listeners na korijenskoj razini su izdvojeni, a njegovi rukovatelji prikazani su na elementima koji ih deklariraju, a ne na cijeloj aplikaciji.
Reload & record hvata svaki poziv addEventListener od početka učitavanja stranice, uključujući listeners window i document, samo za to jedno učitavanje.
Dodani i uklonjeni čvorovi, promjene atributa i promjene teksta bljeskaju na stranici, s brojačem mutacija po sekundi.
Rangirani popis elemenata koji se najviše mijenjaju, s uključenim atributima, upućuje ravno na neuobičajena ponovna renderiranja.
Na prvi pogled pogledajte ima li gumb zapravo listener ili se rukovatelj umjesto toga nalazi na elementu omotača.
Pronađite svaki element koji sluša pomicanje, kotačić ili pomicanje dodirom, uključujući listeners na window i document.
Provjerite koje kontrole reagiraju na događaje tipkovnice, a koje samo na miš.
Gledajte brojač mutacija dok je stranica u mirovanju; elementi koji se stalno mijenjaju upućuju na mjerač vremena ili okvir koji obavlja dodatni posao.
Zadržite pokazivač oko nepoznatog mjesta da biste vidjeli koji su dijelovi interaktivni i koji ih je okvir povezao.
Kliknite ikonu Event Listeners u DevSuite Pro docku. Brzo skeniranje odmah se pokreće i ocrtava svaki element koji pronađe.
Zadržite pokazivač miša na bilo kojem istaknutom elementu da biste vidjeli njegove događaje i njihove izvore. Upotrijebite pločice kategorija za prikaz samo listeners klikova, lebdenja ili pomicanja.
Pritisnite Reload & record za ponovno učitavanje stranice jednom uz uključeno snimanje. Alat se ponovno otvara sam i sada uključuje svaki poziv addEventListener.
Pritisnite redak na popisu da biste pomaknuli stranicu do tog elementa i bljeskali ga. Copy report daje ti potpuni popis kao tekst.
Otvorite karticu DOM mutations i upotrijebite stranicu. Elementi koji se mijenjaju bljeskaju, a oni najprometniji se penju na vrh liste.
Instalirajte DevSuite Pro besplatno i otključajte 74+ razvojnih alata za svoj preglednik.
