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

Question

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, un alert("bar") se visualiza. Entonces sé que en algún lugar, algún código se está obligando a #foo.

¿Cómo puedo encontrar el código que está vinculando el alert("bar") al evento de clic? Estoy buscando una solución con Chrome.

PD: El ejemplo es ficticio, por lo que no estoy buscando una solución como: "Use xxxxxx y busque en todo el proyecto" alerta ( "bar ") ". Quiero una solución de depuración/rastreo real.

Answer 1

Usando Chrome 15.0.865.0 Dev. Hay una sección de "oyentes de eventos" en el panel de elementos:

Y un "punto de ruptura de los oyentes de eventos" en el panel de 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 maneja el evento. Idealmente, reemplazaría la versión minificada de jQuery con una sin minificar para que no tenga que paso todo el tiempo y usar atravesar cuando sea posible.

Answer 2

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

1. Haga clic derecho en el elemento para inspeccionar o encontrarlo en el panel 'Elementos'.
2. Luego, en la pestaña/panel de 'oyentes' de eventos, expanda el evento (por ejemplo, 'hacer clic'))
3. Expanda los diversos sub-nodos para encontrar el que desee, y luego busque dónde está el sub-nodo 'Handler'.
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 manejador, como se demostró en la siguiente imagen, y explicada por Paul Irish aquí: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/ntcis15uiga

Answer 3

Prueba la extensión de auditoría de jQuery (https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg), después de instalar, siga estos pasos:

1. Inspeccionar el elemento
2. En lo nuevo 'auditoría jQuery'TAB expandir la propiedad de los 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 'Impresión bonita'Botón para una vista más legible del código

Answer 4

Para la versión Chrome versión 71.0.3578.98 (Último a partir de 2019):

1. Seleccione el elemento que desea inspeccionar

2. Elija la pestaña Event Listener

3. Asegúrese de verificar los oyentes del marco para mostrar el archivo JavaScript real en lugar de la función jQuery.

Answer 5

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

Google Chromes Developer Tools tiene una función de búsqueda integrada en la sección Scripts

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

• Haga clic derecho en cualquier lugar de una página (en Chrome)
• Haga clic en 'Inspect Element'
• Haga clic en la pestaña 'Scripts'
• Barra de búsqueda en la parte superior derecha

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

Ej: Buscando #foo te llevaría a

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

Answer 6

FindEventHandlers es un complemento jQuery, el código sin procesar está aquí: https://raw.githubusercontent.com/ruidfigueiredo/findhandlersjs/master/findeventhandlers.js

Pasos

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

2. Use la siguiente llamada de función: findEventHandlers(eventType, selector);
   Para encontrar el selector de correspondencia especificado por el controlador EventType de elemento especificado.

Ejemplo:

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

Entonces, si corresponde, el controlador de eventos disponible se mostrará a continuación, debe expandirse para encontrar el controlador, haga clic 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/

Answer 7

Actualización de 2018: podría ser útil para futuros lectores:

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

Por ejemplo: (en tipo de consola de Chrome)

getEventListeners($0)

Mientras $0 es el elemento seleccionado en el DOM.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

Answer 8

Para Chrome versión 52.0.2743.116:

1. En las herramientas de desarrollador de Chrome, mencione el panel de 'búsqueda' presionando Ctrl+Shift+F.

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

Los resultados de los elementos vinculados deben aparecer en el panel y indicar el archivo en el que están ubicados.