Event Listeners describe cada elemento que tiene un event listener, coloreado por tipo (hacer clic, pasar el cursor, desplazarse, tocar, teclado y formulario), muestra de dónde proviene cada controlador y muestra los elementos a medida que cambia el DOM.
Averiguar por qué algo reacciona (o no) generalmente comienza con una pregunta que la página no responde: ¿hay algún controlador de clics en este elemento? ¿Qué elemento posee realmente el comportamiento de desplazamiento? ¿Qué es escuchar el desplazamiento y hacer que la página tartamudee? Browser DevTools puede enumerar los listeners de un elemento a la vez, si ya sabe qué elemento seleccionar.
Esta herramienta responde la pregunta para toda la página a la vez. Cada elemento con un listener obtiene un contorno en el color de su tipo (hacer clic, pasar el cursor, desplazarse, tocar y arrastrar, teclado o formulario y foco) y al pasar el cursor sobre uno se muestran los eventos exactos y de dónde vino cada uno: un atributo en línea, una propiedad, un controlador React o Vue, jQuery o addEventListener. Los mosaicos de categorías activan y desactivan cada tipo, y la lista debajo nombra cada elemento, por lo que un clic lo desplaza hasta él.
Los marcos se manejan correctamente. React vincula a sus listeners a la raíz y envía eventos internamente, lo que haría que toda la aplicación parezca clicable; la herramienta deja a un lado esos registros raíz y muestra los controladores React en los elementos que los declaran. El escaneo rápido no necesita recarga y cubre controladores en línea, React, Vue y jQuery. Listeners agregados con addEventListener simple antes de que se abra la herramienta solo se pueden ver desde el inicio de la carga de una página, por lo que Reload & record recarga la página una vez con la grabación activada; luego, la herramienta se vuelve a abrir por sí sola con todos listener incluidos, los de nivel de página en window y document también.
La segunda pestaña vigila el propio DOM. Cada nodo agregado o eliminado, cambio de atributo y cambio de texto parpadea en la página, los contadores muestran mutaciones por segundo y una lista clasifica los elementos que más cambian, con los atributos involucrados. Un flujo constante mientras nadie toca la página generalmente significa un temporizador, una animación basada en JavaScript o un marco que se reproduce más de lo que debería: exactamente las cosas que agotan las baterías y hacen que las páginas tartamudeen.
Los elementos con clic, desplazamiento, desplazamiento, toque, teclado y listeners de formulario están delineados en su propio color, con mosaicos para mostrar u ocultar cada tipo.
Atributos en línea, propiedades, controladores React y Vue, eventos jQuery y llamadas addEventListener, etiquetados en cada elemento.
listeners de nivel raíz de React se reservan y sus controladores se muestran en los elementos que los declaran en lugar de en toda la aplicación.
Reload & record captura cada llamada addEventListener desde el inicio de la carga de una página, incluidos listeners window y document, solo para esa carga.
Los nodos agregados y eliminados, los cambios de atributos y los cambios de texto parpadean en la página, con un contador de mutaciones por segundo.
Una lista clasificada de los elementos que más cambian, con los atributos involucrados, apunta directamente a renderizados desbocados.
Vea de un vistazo si un botón realmente tiene un listener o si el controlador se encuentra en un elemento contenedor.
Encuentre todos los elementos que escuchan el desplazamiento, la rueda o el movimiento táctil, incluidos listeners en window y document.
Compruebe qué controles responden a los eventos del teclado y cuáles solo responden al mouse.
Observe el contador de mutaciones mientras la página está inactiva; Los elementos que siguen cambiando apuntan a un temporizador o un marco que realiza trabajo adicional.
Pase el cursor por un sitio desconocido para ver qué partes son interactivas y qué marco las conectó.
Haga clic en el icono Event Listeners en el Dock DevSuite Pro. Un escaneo rápido se ejecuta inmediatamente y describe cada elemento que encuentra.
Pase el cursor sobre cualquier elemento delineado para ver sus eventos y sus fuentes. Utilice los mosaicos de categorías para mostrar solo listeners que hacen clic, se desplazan o se desplazan.
Presione Reload & record para recargar la página una vez con la grabación activada. La herramienta se vuelve a abrir por sí sola y ahora incluye todas las llamadas addEventListener.
Haga clic en una fila de la lista para desplazarse por la página hasta ese elemento y mostrarlo. Copy report le brinda la lista completa como texto.
Abra la pestaña DOM mutations y use la página. Los elementos cambiantes parpadean y los más ocupados suben a la cima de la lista.
Instala DevSuite Pro gratis y desbloquea más de 74 herramientas de desarrollador para tu navegador.
