Visualización de eventos activados en Elements con Chrome DevTools

Para solucionar problemas y optimizar el manejo de eventos en sus páginas web, puede utilizar Chrome DevTools para inspeccionar los eventos desencadenados en elementos específicos.

Ejecute los siguientes pasos usando Chrome Web Desarrollador:

1. Inspeccionar el elemento:

   • Haga clic derecho en el elemento de destino y seleccione "Inspeccionar" o navegue hasta " Pestaña "Elementos" en DevTools.

2. Monitor Eventos:

   • Uso de monitorEvents:

     • Abre la pestaña "Consola".
     • Ingresa a monitorEvents ($0) en la consola, donde $0 representa el seleccionado elemento.

   • Especificar el tipo de evento:

     • Opcionalmente, proporcione el tipo de evento que desea monitorear como segundo argumento para monitorearEventos, por ejemplo, monitorearEventos(document.body, 'mouse').

Las interacciones con el elemento inspeccionado ahora mostrarán sus nombres de eventos y datos asociados.

3. Detener monitoreo:

   • Para interrumpir el monitoreo de eventos, ingrese unmonitorEvents($0) en el campo consola.

Tipos de eventos disponibles (a partir del 30 de enero de 2023)

Puede limitar los eventos monitoreados especificando el siguientes tipos:

• mouse: eventos del mouse (abajo, arriba, clic, etc.)
• tecla: eventos de teclado (abajo, arriba, presionar, etc.)
• toque: eventos táctiles (iniciar, mover, fin, etc.)
• control: eventos de control de elementos (cambiar tamaño, enfoque, cambio, etc.)