Búsqueda de sitios web

javascript - Usando Chrome, cómo encontrar a qué eventos está vinculado 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, se muestra un alert("bar"). Así que sé que en algún lugar, algún código se está vinculando 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, así que no estoy buscando una solución como: "Usa XXXXXX y busca en todo el proyecto 'alert("bar")'". Quiero una solución real de depuración/rastreo.

Respuesta #1

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

Y un "Puntos de interrupción de escuchadores de eventos" en el panel de Scripts. Usa un punto de interrupción en Mouse -> click y luego "entrar en la siguiente llamada de función" mientras observas la pila de llamadas para ver qué función de usuario maneja el evento. Idealmente, reemplazarías la versión minimizada de jQuery con una no minimizada para que no tengas que entrar todo el tiempo, y usarías pasar sobre cuando sea posible.

Respuesta #2

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

  1. Haga clic derecho en el elemento para inspeccionarlo, o encuéntrelo en el panel 'Elementos'.
  2. Luego, en la pestaña/panel 'Event Listeners', expande el evento (por ejemplo, 'click')
  3. Expande los distintos subnodos para encontrar el que deseas, y luego busca dónde está el subnodo 'handler'.
  4. Haga clic derecho en la palabra 'function' y luego haga clic en 'Mostrar definición de función'

Esto te llevará al lugar donde se definió el manejador, como se demuestra en la imagen siguiente, y explicado por Paul Irish aquí: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Respuesta #3

Prueba la extensión jQuery Audit (https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg), después de instalarla sigue estos pasos:

  1. Inspeccionar el elemento
  2. En la nueva pestaña 'jQuery Audit' expande la propiedad Eventos
  3. Elige para el evento que necesites
  4. Desde la propiedad del manejador, haz clic derecho sobre la función y selecciona 'Mostrar definición de la función'
  5. Ahora verás el código de enlace de eventos
  6. Haga clic en el botón 'Pretty print' para ver el código de manera más legible

Respuesta #4

(Último hasta 2022) Para la versión Chrome Versión 99:

  1. Selecciona el elemento que deseas inspeccionar

  2. Elige la pestaña de Event Listeners

  3. Asegúrate de revisar los listeners del Framework para mostrar el archivo real de JavaScript en lugar de la función de jQuery.

Artículos relacionados