Cómo encontrar el código que ejecuta un botón o elemento en Chrome mediante las herramientas de desarrollo

Estoy usando Chrome y mi propio sitio web.

Lo que sé desde dentro:

1) Tengo un formulario en el que la gente se inscribe haciendo clic en esta imagen-botón naranja:

introduzca la descripción de la imagen aquí

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

3) En la parte superior del código fuente, hay toneladas de fuentes de scripts. 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ías encontrar $(".formSend").click(function() { ... }); que es lo que desencadena el botón (para hacer una validación y envío de formulario bastante complejo) y lo que quiero es poder encontrar eso usando chrome dev tools en cualquier sitio web.

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

La pestaña Listeners no me ha funcionado. Entonces intenté buscar en los escuchadores de eventos de clic, lo que me pareció una apuesta segura pero... no hay ningún jquery2.js ahí (y realmente no sabría en qué archivo está el código así que perdería el tiempo comprobando todo esto...):

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

Jesse explica por qué:

La razón por la que tu función no está directamente ligada al manejador de eventos de clic es porque jQuery devuelve una función que se liga. La función de jQuery, a su vez, pasa por algunas capas de abstracción y comprobaciones, y en algún lugar de ahí, ejecuta tu función.

Como sugirieron algunos de ustedes, he recopilado los métodos que funcionaron en una respuesta más abajo.

Carles Alcolea
Pregunta editada 20º noviembre 2019 в 1:31
Programación
google-chrome javascript jquery google-chrome-devtools
5º mayo 2014 в 12:21
3 vistas

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

Debido a la amplitud de la abstracción y funcionalidad de jQuery's, hay que saltar un montón de aros para llegar a la carne del evento. He creado este [jsFiddle](http://jsfiddle.net/PEw7W/1/) para demostrar el trabajo.

1. Configurando el punto de interrupción de la escucha de eventos

Estuviste cerca en este caso.

  1. Abre las herramientas de desarrollo de Chrome (F12), y ve a la pestaña Fuentes.
  2. Desciende hasta Mouse -> Click Chrome Dev Tools -> Pestaña Fuentes -> Ratón -> Clic1 (haga clic para ampliar)*

2. Haga clic en el botón

Chrome Dev Tools detendrá la ejecución de la secuencia de comandos, y le presentará este hermoso enredo de código minificado:

[] (haz clic para ampliar)*

3. ¡Encuentra el glorioso código!

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

  1. Pulse la tecla F11 (Step In) hasta que aparezca el código fuente deseado
  2. Código fuente finalmente alcanzado
  • En el ejemplo de [jsFiddle](http://jsfiddle.net/PEw7W/1/) proporcionado arriba, tuve que pulsar F11 108 veces antes de llegar al manejador de eventos/función deseado
  • Su kilometraje puede variar, dependiendo de la versión de jQuery (o de la biblioteca del framework) utilizada para enlazar los eventos
  • Con suficiente dedicación y tiempo, puedes encontrar cualquier manejador/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](http://jsfiddle.net/PEw7W/) con una versión de depuración de jQuery (es decir, no minificada). Cuando miras el código en el primer punto de ruptura (no minificado), puedes ver que el código está manejando 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 has perdido en tu intento cuando la "Ejecución hace una pausa y salto línea a línea*", es porque puede que hayas utilizado la función "Step Over", en lugar de Step In. Aquí hay una respuesta de StackOverflow que explica las diferencias.

Por último, la razón por la que tu función no está directamente vinculada al manejador de eventos de clic 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 comprobaciones, y en algún lugar de ahí, ejecuta tu función.

Community
Respuesta editada 23º mayo 2017 в 12:10
Comentarios (9)

Parece que la parte de "...y salto línea a línea..." está mal. ¿Saltas por encima o por debajo y estás seguro de que no te saltas accidentalmente la llamada correspondiente?

Dicho esto, la depuración de frameworks puede ser tediosa precisamente por esta razón. Para aliviar el problema, puede habilitar el experimento "Habilitar soporte de depuración de frameworks". ¡Feliz depuración! :)

Comentarios (1)

Puede utilizar [findHandlersJS](https://github.com/ruidfigueiredo/findHandlersJS)

Puedes encontrar el handler haciendo en la consola de 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 manejador de eventos en
  • eventos Array con información sobre los manejadores de eventos jquery para el tipo de evento que nos interesa (por ejemplo, click, change, etc)
  • handler Método real del manejador de eventos que se puede ver haciendo clic con el botón derecho y seleccionando Mostrar definición de la función
  • selector El selector proporcionado para los eventos delegados. Estará vacío para los eventos directos.
  • objetivos Lista con los elementos a los que se dirige este manejador de eventos. Por ejemplo, para un manejador de eventos delegado que está registrado en el objeto documento y tiene como objetivo todos los botones de una página, esta propiedad listará todos los botones de la página. Puedes pasar el ratón por encima de ellos y verlos resaltados en chrome.

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

Rui
Respuesta editada 6º mayo 2014 в 9:55
Comentarios (0)