javascript - para - console.log firefox

Cómo encontrar qué código ejecuta un botón/elemento en Chrome usando las Herramientas del desarrollador

Question

Estoy usando Chrome y mi propio sitio web.

Lo que sé por dentro:

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

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. Por supuesto, sé cuál llama el botón, 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 con el botón (para realizar una validación de formulario bastante compleja y enviarlo) y lo que quiero es poder encontrar eso utilizando las herramientas de desarrollo de Chrome en cualquier sitio web.

¿Cómo podemos saber dónde llama el elemento?

La pestaña de oyentes no funcionó para mí

Entonces intenté buscar a los oyentes del evento de clic, lo cual me pareció una apuesta segura pero ... no hay jquery2.js ahí (y no sabría realmente en qué archivo está el código, así que perdería tiempo revisando todo estas...):

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

Jesse explica por qué en su respuesta :

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

EDITAR: He recopilado todos los métodos que surgieron en una respuesta a continuación, según lo sugerido por algunos de ustedes.

Answer 1

Aquí hay algunas soluciones:

Solución 1 (funciona bien, solo un poco de configuración pero no terceros)

Marco de blackboxing:

1. Abre las Herramientas de desarrollo de Chrome ( F12 o ⌘ + ⌥ + i ) y ve a la configuración (arriba a la derecha o F1 )
2. Justo allí encontrarás una pestaña a la izquierda llamada " Blackboxing "
3. Y aquí es donde coloca el patrón RegEx de los archivos que desea evitar pasar. Por ejemplo: jquery/..*/.js (traducción humana : jquery.*.js )
4. Si desea omitir archivos con varios patrones , puede agregarlos usando el carácter de canalización así: jquery/..*/.js|include/.postload/.js . O simplemente siga agregándolos con el botón "Agregar".
5. Ahora aplique la Solución 3 que se describe a continuación.

Más sobre esto : https://developer.chrome.com/devtools/docs/blackboxing

Punta de bonificación : uso Regex101 para probar rápidamente mis patrones de Regex101 regulares oxidadas y descubrir en qué me equivoco con el depurador de Regex101 de Regex101 . Hay otros, por supuesto.

Solución 2 (funciona bien y es fácil, pero necesita instalar una extensión)

Evento visual :

Favorito personal Funciona de maravilla, pero es una extensión, no utiliza las Herramientas de desarrollo de Chrome. Solo para tu información.

Solución 3 (algo doloroso pero fácil)

1. Abriendo las herramientas de desarrollo -> pestaña Fuentes, y a la derecha encuentra los Event Listener Breakpoints :

2. Expanda el Mouse y haga clic en ... bueno, click .

3. Ahora haga clic en el elemento (la ejecución debe pausar) y aquí comienza el juego: simplemente comience a presionar F11 (que es Paso a paso ) para pasar por todo el código. Siéntate bien, puede haber una tonelada de saltos.
4. Es probable que haya muchos scripts que no desee o necesite para arrastrarse, así que combine esto con el Método 1 descrito anteriormente.

Solución 4 (modo de supervivencia)

Siempre me quedo con Ctr + Shift + F (búsqueda de texto en todas las fuentes) y #envio o cualquiera que sea la etiqueta / identificación que creas que comienza la fiesta, leyendo todos los hallazgos para probar qué código podría estar corriendo , sintiéndome un perdedor y sentir que tiene que haber una forma segura de saber realmente QUÉ es activado por el botón.

Pero tenga en cuenta que a veces no solo hay un img sino un montón de divs superponen, y ni siquiera puede saber qué es lo que activa el código. Probablemente no deberías tener que usar este método.

Answer 2

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. Ejecutar $._data($(".example").get(0), "events")
3. Profundice 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 por 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. Lee este blog de jQuery . Ahora deberías usar esto en su lugar:

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

Tenga en cuenta que esta es una estructura interna, "privada", y no debe modificarse. Utilice esto solo para fines de depuración.

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

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

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

Answer 3

Puedes usar findHandlersJS

Puedes encontrar el manejador haciendo en la consola chrome:

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

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

• elemento
  El elemento real donde se registró el controlador de eventos en
• eventos
  Arreglo con información sobre los controladores de eventos jquery para el tipo de evento que nos interesa (por ejemplo, hacer clic, cambiar, etc.)
• entrenador de animales
  El método del controlador de eventos real que puede ver haciendo clic con el botón derecho sobre él y seleccionando Mostrar definición de función
• selector
  El selector previsto para eventos delegados. Estará vacío para eventos directos.
• objetivos
  Lista con los elementos que este controlador de eventos apunta. Por ejemplo, para un controlador de eventos delegado que se registra en el objeto de documento y se dirige a todos los botones de una página, esta propiedad mostrará una lista de todos los botones de la página. Puedes moverlos y verlos resaltados en cromo.

Más información here y puedes intentarlo en este sitio de ejemplo here .

Answer 4

Suena como la parte "... y salto línea por línea ..." está mal. ¿Paso a paso o paso a paso y está seguro de que no pierde accidentalmente la llamada correspondiente?

Dicho esto, los marcos de depuración pueden ser tediosos por este motivo. Para solucionar el problema, puede habilitar el experimento "Habilitar el soporte de depuración de marcos" . Feliz depuración! :)

Answer 5

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 tienen que saltar muchos aros para llegar a la esencia del evento. He configurado este jsFiddle para demostrar el trabajo.

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

Estuviste cerca de esto.

1. Abra las Herramientas de desarrollo de Chrome (F12) y vaya a la pestaña Fuentes.
2. Profundizar hasta el mouse -> Clic
   
   (click para ampliar)

2. Haga clic en el botón!

Chrome Dev Tools detendrá la ejecución del script y le presentará este hermoso entrelazamiento de código minificado:

(click para ampliar)

3. ¡Encuentra el código glorioso!

Ahora, el truco aquí es no dejarse llevar presionando la tecla y mantener un ojo en la pantalla.

1. Presione la tecla F11 (Step In) 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 evento deseado
   • Su millaje 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 atraviesa 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 minified). Cuando miras el código en el primer punto de interrupción (no reducido), puedes 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 lo perdiste en tu intento cuando "la ejecución se detiene y salto línea por línea ", es porque puedes haber usado la función "Paso a paso", en lugar de Paso a paso. Aquí hay una respuesta de que explica las diferencias.

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