Saltar al contenido

¿Cómo veo los eventos activados en un elemento en Chrome DevTools?

Revisamos completamente cada noticia de nuestra web con el objetivo de mostrarte en todo momento la información más veraz y actual.

Solución:

  • Golpear F12 para abrir herramientas de desarrollo
  • Haga clic en la pestaña Fuentes
  • En el lado derecho, desplácese hacia abajo hasta “Puntos de interrupción del detector de eventos” y expanda el árbol
  • Haga clic en los eventos que desea escuchar.
  • Interactúe con el elemento de destino, si se dispara, obtendrá un punto de interrupción en el depurador

Del mismo modo, puede hacer clic con el botón derecho en el elemento de destino -> seleccionar “inspeccionar elemento”. Desplácese hacia abajo en el lado derecho del marco de desarrollo, en la parte inferior está “escucha de eventos”. Expanda el árbol para ver qué eventos están adjuntos al elemento. No estoy seguro de si esto funciona para eventos que se manejan mediante burbujeo (supongo que no)

Puede usar la función monitorEvents.

Simplemente inspeccione su elemento (right mouse clickInspect en el elemento visible o ir a Elements pestaña en Chrome Developer Tools y seleccione el elemento deseado) luego vaya a Console tabula y escribe:

monitorEvents($0)

Ahora, cuando mueva el mouse sobre este elemento, enfóquelo o haga clic en él, se mostrará el nombre del evento activado con sus datos.

Para dejar de obtener estos datos, simplemente escriba esto en la consola:

unmonitorEvents($0)

$0 es solo el último elemento DOM seleccionado por Chrome Developer Tools. Puede pasar cualquier otro objeto DOM allí (por ejemplo, resultado de getElementById o querySelector).

También puede especificar el “tipo” de evento como segundo parámetro para restringir los eventos monitoreados a un conjunto predefinido. Por ejemplo:

monitorEvents(document.body, 'mouse')

La lista de estos tipos disponibles está aquí.

Hice un pequeño gif que ilustra cómo funciona esta función:

uso de la función monitorEvents

Visual Event es un pequeño bookmarklet agradable que puede usar para ver los controladores de eventos de un elemento. En la demostración en línea se puede ver aquí.

Calificaciones y reseñas

No se te olvide compartir este tutorial si si solucionó tu problema.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *