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

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.

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

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.

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

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

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

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.

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'); })

Actualización 2018: puede ser útil para futuros lectores:

No estoy seguro de cuándo se introdujo originalmente en Chrome. Pero otra forma (fácil) de hacerlo ahora en Chrome es a través de los comandos de la consola.

Por ejemplo: ( en el tipo de consola de Chrome )

getEventListeners($0)

Mientras que $ 0 es el elemento seleccionado en el DOM.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_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/

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.