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


603

Tengo un elemento de formulario personalizable en una página de una biblioteca. Quiero ver qué eventos de JavaScript se activan cuando interactúo con él porque estoy tratando de averiguar qué controlador de eventos usar.

¿Cómo hago eso usando Chrome Web Developer?


13
Este bookmarklet puede ser útil: sprymedia.co.uk/article/Visual+Event+2
scytale

1
La respuesta aquí es valiosa, pero el marcador anterior ^ es en realidad lo que resolvió mi problema. sprymedia.co.uk/article/Visual+Event+2
Jazzy

Respuestas:


879
  • Presiona F12para abrir Dev Tools
  • Haga clic en la pestaña Fuentes
  • En el lado derecho, desplácese hacia abajo hasta "Puntos de interrupción de escucha de eventos" y expanda el árbol
  • Haga clic en los eventos que desea escuchar.
  • Interactúa con el elemento objetivo, si disparan obtendrás 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á 'oyentes de eventos'. Expanda el árbol para ver qué eventos están asociados al elemento. No estoy seguro si esto funciona para eventos que se manejan a través del burbujeo (supongo que no)


11
esta solución es un problema si lo que
busca

67
¿Qué pasa si todos los eventos apuntan a jquery minified que no me importa? ¿Cómo llego a la función que usa ese jquery?
Muhammad Umer el

14
¿Puede mostrar eventos personalizados creados por mí? Cuando leí que cambió vidas, eso fue lo primero que pensé. ¿Echo de menos algo?
Tebe

24
@MuhammadUmer Puede hacer un blackbox de jQuery para que Chrome lo omita y vaya directamente a su código fuente. developer.chrome.com/devtools/docs/blackboxing
Matt Zeunert

1
@MuhammadUmer, ¿y si dejas de usar JQuery?
John Balvin Arias

831

Puedes usar monitorEvents función .

Simplemente inspeccione su elemento ( right mouse clickInspecten el elemento visible o vaya a la Elementspestaña en Chrome Developer Tools y seleccione el elemento deseado) luego vaya a la Consolepestaña y escriba:

monitorEvents($0)

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

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

unmonitorEvents($0)

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

También puede especificar el "tipo" de evento como segundo parámetro para limitar 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 característica:

uso de la función monitorEvents


2
Convenido. Esta es la forma de hecho de monitorear y rastrear eventos en elementos específicos .
dmackerman

1
Ah si ya veo. Fue lo "indefinido" lo que me estaba desanimando, pero ahora veo que tienes lo mismo en tu útil GIF animado. Gracias.
MSC

1
qué herramienta
usaste

3
@MariuszPawelski ¿Cómo proceder desde aquí? Hice esto y encontré el evento de clic, que era el evento que me interesaba. Pero, ¿cómo encuentro lo que sucede cuando hago clic en el elemento? ¿Qué tipo de código se ejecuta? ¿Qué propiedad de MouseEventdebería buscar?
Utku

3
pero dónde encontrar el controlador, por ejemplo, haga clic en controlador.
Sheikh Abdul Wahid

26

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


22

Para jQuery (al menos la versión 1.11.2), el siguiente procedimiento funcionó para mí.

  1. Haga clic derecho en el elemento y abra 'Herramientas para desarrolladores de Chrome'
  2. Escriba $._data(($0), 'events');en la 'Consola'
  3. Expanda los objetos adjuntos y haga doble clic en el handler:valor.
  4. Esto muestra el código fuente de la función adjunta, busque parte de eso usando la pestaña 'Buscar'.

Y es hora de dejar de reinventar la rueda y comenzar a usar eventos JS de vainilla ... :)

cómo-encontrar-jquery-click-handler-function


15

Esto no mostrará eventos personalizados como los que podría crear su script si se trata de un complemento jquery. por ejemplo :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

El Panel de eventos bajo Scripts en las herramientas de desarrollador de Chrome no le mostrará "Algo: evento personalizado uno"


21
¿Cómo, entonces, uno encuentra esos eventos?
Calydon
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.