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

pushstate jquery

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, aparece una alerta ("barra"). Así que sé que en algún lugar, algunos códigos se vinculan a #foo.

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

Ps .: El ejemplo es ficticio, así que no estoy buscando soluciones como: "Use XXXXXX y busque todo el proyecto para" alert (/ "bar /") ". Quiero una verdadera solución de depuración / rastreo.

Answer 1

Para la versión de Chrome versión 62.0.3202.94 :

1. Seleccione el elemento que desea inspeccionar

2. Elija la pestaña Escucha de eventos

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

Answer 2

Para la versión de Chrome 52.0.2743.116:

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

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

Los resultados de los elementos combinados deberían aparecer en el panel y indicar el archivo en el que están ubicados.

Answer 3

Pruébelo en la extensión jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), luego 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 manejador, haga clic derecho sobre la función y seleccione '' Mostrar definición de función ''
5. Ahora verá el código de enlace de evento
6. Haga clic en el botón '' Pretty print '' para obtener una vista más legible del código

Answer 4

También puede usar el inspector de Chrome para buscar eventos adjuntos de otra forma, 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 de "Escucha de eventos", expanda el evento (por ejemplo, "hacer clic")
3. Expanda los distintos nodos para encontrar el que desea y luego busque dónde se encuentra el subnodo ''controlador''.
4. Haga clic con el botón 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 muestra en la siguiente imagen, y lo explica Paul Irish aquí: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

Answer 5

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

Y un "Punto de interrupción de los oyentes del evento" en el panel de Scripts. Use un Mouse -> haga clic en punto de interrupción y luego "ingrese a la siguiente llamada de función" mientras mantiene un ojo en la pila de llamadas para ver qué función de usuario gestiona el evento. Idealmente, reemplazaría la versión minimizada de jQuery por una no unificada para que no tenga que intervenir todo el tiempo, y usar el paso de ser posible.

Answer 6

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

Pasos

1. Pegue el código en bruto 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 controlador eventType del elemento especificado del selector correspondiente.

Ejemplo :

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

Entonces, si hay alguno, el controlador de eventos disponible se mostrará abajo, necesita expandir para encontrar el controlador, haga clic con el botón derecho en la función y seleccione la show function definition

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

Answer 7

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

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

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 "Guiones"
• Barra de búsqueda en la parte superior derecha

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

#foo : la búsqueda de #foo te llevaría a

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