Usando Chrome, cómo encontrar a qué eventos están vinculados un elemento

148

Supongamos que tengo un enlace en mi página:

<a href="#" id="foo">Click Here</a>

No sé nada más, pero cuando hago clic en el enlace, alert("bar")aparece un. Así que sé que en algún lugar se está vinculando algún código #foo.

¿Cómo puedo encontrar el código que vincula el alert("bar")evento click? Estoy buscando una solución con Chrome.

Ps .: El ejemplo es ficticio, por lo que no estoy buscando una solución como: "Usar XXXXXX y buscar en todo el proyecto" alert (\ "bar \") ". Quiero una solución de depuración / rastreo real.

FMaz008
fuente

Respuestas:

140

Usando Chrome 15.0.865.0 dev . Hay una sección "Oyentes de eventos" en el panel Elementos:

ingrese la descripción de la imagen aquí

Y un "Punto de interrupción de escucha de eventos" en el panel Scripts. Use un mouse -> haga clic en el punto de interrupción y luego "pase a la siguiente llamada de función" mientras vigila la pila de llamadas para ver qué función de usuario y país maneja el evento. Idealmente, reemplazaría la versión minificada de jQuery por una no minificada para que no tenga que intervenir todo el tiempo y usar el paso adelante cuando sea posible.

ingrese la descripción de la imagen aquí

Ionuț G. Stan
fuente
10
Acercándose, pero la mayoría de los resultados allí apuntan a la línea 16 de ... jquery.min.js :( (Entiendo por qué, no es necesario explicar, pero ¿cómo podemos encontrar quién llamó al método bind () de jQuery?
FMaz008
Esas herramientas también están disponibles en Chrome 12.0.742.100. :) Gracias !
FMaz008
13
@ Fluffy: No tienes que hacerlo. Simplemente haga clic en el { }símbolo en la esquina inferior izquierda cuando vea js. Magia.
Hannes Schneidermayer
Pasar por el complejo código de despacho de eventos de jQuery es un gran dolor. La respuesta de jQuery Audit a continuación ( stackoverflow.com/a/30487583/24267 ) es mucho mejor.
mhenry1384
3
Para excluir jquery de la pila de llamadas, escriba en recuadro negro el script: developer.chrome.com/devtools/docs/blackboxing @ IonuțG.Stan, o mods, ¿puede actualizar la respuesta con una referencia al blackboxing? Parece ser una pregunta común. relevante a esta respuesta.
Chris Hynes
47

También puede usar el inspector de Chrome para buscar eventos adjuntos de otra manera, de la siguiente manera:

  1. Haga clic derecho en el elemento para inspeccionar, o encuéntrelo en el panel 'Elementos'.
  2. Luego, en la pestaña / panel 'Oyentes de eventos', expanda el evento (por ejemplo, 'clic')
  3. Expanda los diversos subnodos para encontrar el que desea y luego busque dónde está el subnodo 'controlador'.
  4. Haga clic derecho en la palabra 'función' y luego haga clic en 'Mostrar definición de función'

Esto lo llevará a donde se definió el controlador, como se demuestra en la siguiente imagen, y Paul Irish lo explicó aquí: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

'Mostrar definición de función'

Matty J
fuente
dos años, y sigue siendo la mejor respuesta a esta pregunta.
Stuart
16

Pruébelo con la extensión jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), después de la instalación, siga estos pasos:

  1. Inspeccionar el elemento
  2. En la nueva pestaña ' Auditoría jQuery ', expanda la propiedad Eventos
  3. Elija para el evento que necesita
  4. Desde la propiedad del controlador, haga clic derecho sobre la función y seleccione ' Mostrar definición de función '
  5. Ahora verá el código de enlace del evento
  6. Haga clic en el botón ' Pretty print ' para obtener una vista más legible del código
Javier Armendariz
fuente
1
Esta es una excelente extensión y ahorra mucho tiempo tamizando a través de JavaScript.
Neil Monroe
A menudo encuentro que "Oyentes de eventos" enumera "No hay oyentes de eventos", y que al seleccionar "Puntos de interrupción de oyentes de eventos"> Mouse> Clic no se crea un punto de interrupción. Este complemento funciona muy bien.
StuartN
@Javier> es una gran respuesta. ¿Funciona para un mecanismo javascript (no jQuery)?
Mahefa
11

(Último a partir de 2020) Para la versión Chrome versión 83.0.4103.61 :

Herramientas para desarrolladores de Chrome: escucha de eventos

  1. Seleccione el elemento que desea inspeccionar

  2. Elija la pestaña Oyentes de eventos

  3. Asegúrese de verificar los escuchas de Framework para mostrar el archivo javascript real en lugar de la función jquery.

lovelyramos
fuente
6

Editar : en lugar de mi propia respuesta, esta es bastante excelente: Cómo depurar enlaces de eventos JavaScript / jQuery con Firebug (o herramienta similar)

Las herramientas para desarrolladores de Google Chromes tienen una función de búsqueda integrada en la sección de secuencias de comandos

Si no está familiarizado con esta herramienta: (por si acaso)

  • haga clic derecho en cualquier lugar de una página (en cromo)
  • haga clic en 'Inspeccionar elemento'
  • haga clic en la pestaña 'Scripts'
  • Barra de búsqueda en la parte superior derecha

Hacer una búsqueda rápida del #ID debería llevarlo finalmente a la función de enlace.

Ej: buscar #foote llevaría a

$('#foo').click(function(){ alert('bar'); })

ingrese la descripción de la imagen aquí

Michael Jasper
fuente
44
Buen comienzo, pero ¿qué pasa si tengo 1500 referencias a #foo, la mayoría de las cuales no son vinculantes, o en el caso de que tenga múltiples ID #foo en scripts externos que no se activan en el presente caso?
FMaz008
Gran pregunta En mi experiencia, ahí es donde generalmente comienza el proceso de depuración humana :)
Michael Jasper
1
Jeje, tienes razón, pero mi pregunta también fue sobre lo que debo hacer como humano: p
FMaz008
4

findEventHandlers es un complemento de jquery, el código sin procesar está aquí: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

Pasos

  1. Pegue el código sin procesar directamente en la consola de Chrome (nota: debe tener jquery cargado ya)

  2. Utilice la siguiente llamada de función: findEventHandlers(eventType, selector);
    para encontrar el controlador eventType del elemento especificado del selector correspondiente.

Ejemplo :

findEventHandlers("click", "#clickThis");

Luego, si corresponde, el controlador de eventos disponible se mostrará a continuación, debe expandirse para encontrar el controlador, haga clic con el botón derecho en la función y seleccione show function definition

Ver: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

unifreak
fuente
3

Para la versión de Chrome 52.0.2743.116:

  1. En las Herramientas para desarrolladores de Chrome, abra el panel 'Buscar' presionando Ctrl+ Shift+ F.

  2. Escriba el nombre del elemento que está tratando de encontrar.

Los resultados de los elementos enlazados deben aparecer en el panel e indicar el archivo en el que se encuentran.

Echo fantasma
fuente