Estoy usando Chrome y mi propio sitio web.

Lo que sé desde adentro:

1 ) Tengo un formulario donde las personas se registran haciendo clic en este botón naranja de imagen:

2 ) Lo inspecciono, y esto es todo lo que es: <img class="formSend" src="images/botoninscribirse2.png">

3 ) En la parte superior del código fuente, hay toneladas de fuentes de script. Sé a cuál llama el botón porque lo codifiqué:<script src="js/jquery2.js" type="text/javascript"></script>

4 ) Dentro de ese archivo, podría encontrar: $(".formSend").click(function() { ... });que es lo que se activa mediante el botón (para hacer una validación y envío de formulario bastante complejo) y lo que quiero es poder encontrarlo usando las herramientas de desarrollo de Chrome en cualquier sitio web.

¿Cómo puedo averiguar dónde llama el elemento?

La pestaña de oyentes no funcionó para mí. Entonces traté de buscar a los oyentes de eventos de clic, lo que me pareció una apuesta segura pero ... no hay nada jquery2.jsallí (y realmente no sabría qué archivo es el código, así que perdería el tiempo revisando todo esto ... .):

Mi $(".formSend").click(function() { ... });función dentro del jquery2.jsarchivo no está allí.

Jesse explica por qué :

"Finalmente, la razón por la cual su función no está directamente vinculada al controlador de eventos click es porque jQuery devuelve una función que queda vinculada. La función de jQuery, a su vez, pasa por algunas capas de abstracción y verificaciones, y en algún lugar allí, ejecuta su función ".

Como sugirieron algunos de ustedes, he recopilado los métodos que funcionaron en una respuesta a continuación .

La respuesta de Alexander Pavlov se acerca más a lo que quieres.

Debido a la amplitud de la abstracción y la funcionalidad de jQuery, se deben saltar muchos aros para llegar al meollo del evento. He configurado este jsFiddle para demostrar el trabajo.

1. Configuración del punto de interrupción del oyente de eventos

Estabas cerca de esto.

1. Abra las Herramientas de desarrollo de Chrome (F12) y vaya a la pestaña Fuentes.
2. Desplácese hasta Mouse -> Haga clic (haga clic para ampliar)
   
   

2. Haga clic en el botón!

Chrome Dev Tools hará una pausa en la ejecución del script y te presentará este hermoso enredo de código minificado:

(haga clic para ampliar)

3. ¡Encuentra el glorioso código!

Ahora, el truco aquí es no dejarse llevar presionando la tecla y estar atento a la pantalla.

1. Presione la F11tecla (Paso) hasta que aparezca el código fuente deseado
2. Código fuente finalmente alcanzado
   • En la muestra jsFiddle proporcionada anteriormente, tuve que presionar F11 108 veces antes de alcanzar el controlador / función de eventos deseado
   • Su kilometraje puede variar, dependiendo de la versión de jQuery (o biblioteca de marco) utilizada para vincular los eventos
   • Con suficiente dedicación y tiempo, puede encontrar cualquier controlador / función de eventos

4. Explicación

No tengo la respuesta exacta o la explicación de por qué jQuery pasa por las muchas capas de abstracciones que hace; todo lo que puedo sugerir es que es debido al trabajo que hace para abstraer su uso del navegador que ejecuta el código .

Aquí hay un jsFiddle con una versión de depuración de jQuery (es decir, no minimizada). Cuando observa el código en el primer punto de interrupción (no minimizado), puede ver que el código maneja muchas cosas:

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

La razón por la que creo que te lo perdiste en tu intento cuando "la ejecución se detiene y salto línea por línea ", es porque es posible que hayas utilizado la función "Paso sobre", en lugar de Paso a paso. Aquí hay una respuesta de StackOverflow que explica las diferencias.

Finalmente, la razón por la cual su función no está directamente vinculada al controlador de eventos click es porque jQuery devuelve una función que se vincula. La función de jQuery a su vez pasa por algunas capas de abstracción y verificaciones, y en algún lugar allí, ejecuta su función.

Solución 1: blackboxing de framework

Funciona muy bien, configuración mínima y sin terceros.

De acuerdo con la documentación de Chrome :

¿Qué sucede cuando haces un blackbox con un script?

Las excepciones generadas por el código de la biblioteca no se pausarán (si Pausa en las excepciones está habilitada), entrar / salir / pasar por alto el código de la biblioteca, los puntos de interrupción del detector de eventos no se rompen en el código de la biblioteca, el depurador no se detendrá en ningún punto de interrupción establecido en la biblioteca código. El resultado final es que está depurando el código de su aplicación en lugar de los recursos de terceros.

1. Abra las Herramientas para desarrolladores de Chrome ( F12o ⌘+ ⌥+ i), vaya a la configuración (arriba a la derecha o F1). Encuentra una pestaña a la izquierda llamada " Blackboxing "

2. Aquí es donde coloca el patrón RegEx de los archivos que desea que Chrome ignore durante la depuración. Por ejemplo: jquery\..*\.js(patrón glob / humano traducción: jquery.*.js)
3. Si desea omitir archivos con múltiples patrones , puede agregarlos utilizando el carácter de barra vertical, de esta |manera: jquery\..*\.js|include\.postload\.js(que actúa como un "o este patrón", por así decirlo. O continúe agregándolos con el botón "Agregar".
4. Ahora continúe con la Solución 3 descrita a continuación.

Consejo extra! Uso Regex101 regularmente (pero hay muchos otros :) para probar rápidamente mis patrones oxidados de expresiones regulares y descubrir dónde me equivoco con el depurador de expresiones regulares paso a paso. Si aún no tiene "fluidez" en las expresiones regulares, le recomiendo que comience a usar sitios que lo ayuden a escribir y visualizarlos, como http://buildregex.com/ y https://www.debuggex.com/

También puede usar el menú contextual cuando trabaje en el panel Orígenes. Al ver un archivo, puede hacer clic derecho en el editor y elegir Blackbox Script. Esto agregará el archivo a la lista en el panel Configuración:

Solución 2: evento visual

Es una excelente herramienta para tener :

Visual Event es un marcador de JavaScript de código abierto que proporciona información de depuración sobre eventos que se han adjuntado a elementos DOM. El evento visual muestra:

• Qué elementos tienen eventos adjuntos
• El tipo de eventos adjuntos a un elemento.
• Se activa el código que se ejecutará con el evento.
• El archivo de origen y el número de línea donde se definió la función adjunta (solo navegadores Webkit y Opera)

Solución 3: depuración

Puede pausar el código cuando hace clic en algún lugar de la página, o cuando se modifica el DOM ... y otros tipos de puntos de interrupción JS que serán útiles para conocer. Debes aplicar blackboxing aquí para evitar una pesadilla.

En este caso, quiero saber qué sucede exactamente cuando hago clic en el botón.

1. Abra Dev Tools -> pestaña Fuentes, y a la derecha encuentre Event Listener Breakpoints:

   

2. Expandir Mousey seleccionarclick

3. Ahora haga clic en el elemento (la ejecución debería pausar), y ahora está depurando el código. Puede pasar por todos los códigos presionando F11(que es paso ). O retroceda algunos saltos en la pila. Puede haber un montón de saltos

Solución 4: palabras clave de pesca

Con Dev Tools activado, puede buscar en toda la base de código (todo el código en todos los archivos) con ⌘+ ⌥+ Fo:

y buscando #envioo cualquiera que sea la etiqueta / clase / id que crees que comienza la fiesta y puedes llegar a algún lugar más rápido de lo previsto.

Tenga en cuenta que a veces no solo hay un imgmontón de elementos apilados, y es posible que no sepa cuál activa el código.

Si esto está un poco fuera de su conocimiento, eche un vistazo al tutorial de Chrome sobre depuración .

Parece que la parte "... y salto línea por línea ..." está mal. ¿Hace StepOver o StepIn y está seguro de no perder accidentalmente la llamada relevante?

Dicho esto, los marcos de depuración pueden ser tediosos exactamente por esta razón. Para aliviar el problema, puede habilitar el experimento "Habilitar soporte de depuración de marcos" . Feliz depuración! :)

Puedes usar findHandlersJS

Puede encontrar el controlador haciendo en la consola de Chrome:

findEventHandlers("click", "img.envio")

Obtendrá la siguiente información impresa en la consola de Chrome:

• element
  El elemento real donde se registró el controlador de eventos
• Eventos
  Matriz con información sobre los controladores de eventos jquery para el tipo de evento que nos interesa (por ejemplo, hacer clic, cambiar, etc.)
• manejador
  Método de manejador de eventos real que puede ver haciendo clic derecho y seleccionando Mostrar definición de función
• selector
  El selector proporcionado para eventos delegados. Estará vacío para eventos directos.
• destinos
  Lista con los elementos a los que se dirige este controlador de eventos. Por ejemplo, para un controlador de eventos delegado que está registrado en el objeto del documento y se dirige a todos los botones de una página, esta propiedad enumerará todos los botones de la página. Puede desplazarlos y verlos resaltados en cromo.

Más información aquí y puede probarlo en este sitio de ejemplo aquí .

Esta solución necesita el método de datos de jQuery .

1. Abra la consola de Chrome (aunque cualquier navegador con jQuery cargado funcionará)
2. correr $._data($(".example").get(0), "events")
3. Desglose la salida para encontrar el controlador de eventos deseado.
4. Haga clic derecho en "controlador" y seleccione "Mostrar definición de función"
5. El código se mostrará en la pestaña Fuentes

$._data()solo está accediendo al método de datos de jQuery. Una alternativa más legible podría ser jQuery._data().

Punto interesante de esta respuesta SO :

A partir de jQuery 1.8, los datos del evento ya no están disponibles en la "API pública" para los datos. Lea esta publicación de blog jQuery . Ahora deberías usar esto en su lugar:

jQuery._data( elem, "events" ); elem debe ser un elemento HTML, no un objeto jQuery o selector.

Tenga en cuenta que esta es una estructura interna 'privada' y no debe modificarse. Use esto solo para propósitos de depuración.

En versiones anteriores de jQuery, es posible que deba usar el método anterior, que es:

jQuery( elem ).data( "events" );

Una versión agnóstica de jQuery sería: (jQuery._data || jQuery.data)(elem, 'events');