Event Listeners descriuen tots els elements que tenen un event listener, acolorits per tipus (clic, passa el cursor, desplaçament, toca, teclat i formulari), mostra d'on prové cada gestor i mostra elements a mesura que canvia el DOM.
Esbrinar per què alguna cosa reacciona, o no, normalment comença amb una pregunta que la pàgina no respondrà: hi ha un gestor de clics en aquest element? Quin element és realment propietari del comportament de flotació? Què és escoltar el desplaçament i fer tartamudejar la pàgina? Browser DevTools pot enumerar els listeners d'un element alhora, si ja sabeu quin element seleccionar.
Aquesta eina respon a la pregunta de tota la pàgina alhora. Cada element amb un listener obté un contorn del color del seu tipus: feu clic, passeu el cursor, desplaceu-vos, toqueu i arrossegueu, teclat o formulari i focus, i al passar el cursor es mostren els esdeveniments exactes i d'on prové cadascun: un atribut en línia, una propietat, un controlador React o Vue, jQuery o addEventListener. Les fitxes de categoria activen i desactiven cada tipus, i la llista de sota anomena cada element, de manera que un clic us desplaça fins a ell.
Els marcs es gestionen correctament. React connecta els seus listeners a l'arrel i envia esdeveniments internament, cosa que faria que tota l'aplicació semblés clicable; l'eina deixa de banda aquests registres arrel i mostra els controladors React en els elements que els declaren. L'exploració ràpida no necessita recàrrega i cobreix els controladors en línia, React, Vue i jQuery. Listeners afegits amb addEventListener senzill abans que l'eina s'obri només es poden veure des de l'inici de la càrrega de la pàgina, de manera que Reload & record torna a carregar la pàgina una vegada amb la gravació activada; l'eina es torna a obrir per si mateixa amb tots listener inclosos, a nivell de pàgina a window i document també.
La segona pestanya mira el propi DOM. Cada node afegit o eliminat, canvi d'atribut i canvi de text parpelleja a la pàgina, els comptadors mostren mutacions per segon i una llista classifica els elements que més canvien, amb els atributs implicats. Un flux constant mentre ningú toca la pàgina normalment significa un temporitzador, una animació basada en JavaScript o un marc que torna a renderitzar més del que hauria, exactament les coses que esgoten les piles i fan tartamudejar les pàgines.
Els elements amb listeners de clic, desplaçament, desplaçament, tàctil, teclat i formularis es descriuen amb el seu propi color, amb fitxes per mostrar o ocultar cada tipus.
Atributs en línia, propietats en línia, controladors React i Vue, esdeveniments jQuery i trucades addEventListener, etiquetades a cada element.
listeners de nivell arrel de React es deixen de banda i els seus controladors es mostren als elements que els declaren més que a tota l'aplicació.
Reload & record cada trucada addEventListener des de l'inici de la càrrega de la pàgina, inclosos listeners window i document, només per a aquesta càrrega.
Els nodes afegits i eliminats, els canvis d'atributs i els canvis de text parpellegen a la pàgina, amb un comptador de mutacions per segon.
Una llista classificada dels elements que més canvien, amb els atributs implicats, apunta directament a les restitucions fugitives.
Vegeu d'un cop d'ull si un botó realment té un listener o si el controlador es troba en un element d'embolcall.
Trobeu tots els elements que escolteu el desplaçament, la roda o el moviment tàctil, inclosos listeners a window i document.
Comproveu quins controls responen als esdeveniments del teclat i quins només responen al ratolí.
Mireu el comptador de mutacions mentre la pàgina està inactiva; elements que segueixen canviant de punt a un temporitzador o un marc que fa un treball addicional.
Passeu el cursor per un lloc desconegut per veure quines parts són interactives i quin marc les connecta.
Feu clic a la icona Event Listeners al moll DevSuite Pro. Una exploració ràpida s'executa immediatament i descriu tots els elements que troba.
Passeu el cursor sobre qualsevol element esbossat per veure'n els esdeveniments i les seves fonts. Utilitzeu les fitxes de categoria per mostrar només listeners que fan clic, que passeu el cursor o desplaceu-vos.
Premeu Reload & record per tornar a carregar la pàgina una vegada amb la gravació activada. L'eina es reobre per si sola i ara inclou totes les trucades addEventListener.
Feu clic a una fila de la llista per desplaçar-vos per la pàgina fins a aquest element i flashejar-lo. Copy report us ofereix la llista completa com a text.
Obriu la pestanya DOM mutations i utilitzeu la pàgina. Els elements canviants parpellegen i els més ocupats pugen al capdamunt de la llista.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 74 eines de desenvolupador per al teu navegador.
