Cómo encontrar qué código se ejecuta mediante un botón o elemento en Chrome usando las herramientas de desarrollo

345

Estoy usando Chrome y mi propio sitio web.

Lo que sé desde dentro:

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

ingrese la descripción de la imagen aquí

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 secuencias de comandos. 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, puede encontrar: $(".formSend").click(function() { ... });cuál es lo que se activa con el botón (para hacer una validación y envío de formulario bastante complejo) y lo que quiero es poder encontrar eso 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 me funcionó. Entonces intenté buscar 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 todos estos ... .):

ingrese la descripción de la imagen aquí

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

Jesse explica por qué :

"Finally, the reason why your function is not directly bound to the click event handler is because jQuery returns a function that gets bound. jQuery's function, in turn, goes through some abstraction layers and checks, and somewhere in there, it executes your function."


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

16
  • 4
    Normalmente uso el Visual Eventbookmarklet. Detecta eventos de clic vinculados por bibliotecas populares y crea una superposición del sitio que muestra dónde están vinculados los eventos y proporciona muestras de código y ubicaciones de origen para cada evento. Kevin B 5 de mayo de 2014 a las 15:29
  • 3
    @DontVoteMeDown Pero eso derrota toda la pregunta. Suponga que tengo docenas de archivos * .js en el sitio web, ¿cómo sabe que el código que se activa con el botón está dentro de jquery2.js? Carles Alcolea 5 de mayo de 2014 a las 15:29
  • 1
    Entiendo cómo funciona Visual Event (gracias a ti, por cierto) pero cuando haces clic en ese botón, tu navegador sabe perfectamente qué ejecutar , porque lo ejecuta. Solo quiero asegurarme de que no sea posible con herramientas de desarrollo y seguiré adelante. Carles Alcolea 5 de mayo de 14 a las 15:38
  • 1
    Buena pregunta, definitivamente creo que esta es una característica que Chrome (o Firefox) debería tenertomysshadow 5 de mayo '14 a las 21 h.
  • 1
    Si ha encontrado la respuesta a esta pregunta, agréguela como respuesta. Se recomienda encarecidamente responder su propia pregunta , pero no responderla editando su pregunta. The Guy with The Hat 7 de mayo de 2014 a las 20:32
234

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

Debido a la amplitud de la abstracción y 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 escucha de eventos

Estabas cerca de este.

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

2. ¡Haga clic en el botón!

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

Chrome Dev Tools pausó la ejecución del script (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 (Ingresar) hasta que aparezca el código fuente deseado
  2. Finalmente se alcanzó el código fuente
    • En la muestra de jsFiddle proporcionada anteriormente, tuve que presionar F11 108 veces antes de llegar al 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

Controlador / función de eventos deseado


4. Explicación

No tengo la respuesta exacta o una explicación de por qué jQuery pasa por las muchas capas de abstracciones que hace; todo lo que puedo sugerir es que se debe 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 minificado). Cuando miras el código en el primer punto de interrupción (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 se perdió en su intento cuando la " ejecución se detiene y salto línea por línea ", es porque es posible que haya utilizado la función "Paso por encima", en lugar de Paso adentro. Aquí hay una respuesta de StackOverflow que explica las diferencias.

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 vincula. La función de jQuery, a su vez, pasa por algunas capas de abstracción y verificaciones, y en algún lugar de allí, ejecuta su función.

8
  • Vaya, usted y @ Alexander-Pavlov tienen toda la razón, me lo perdí. ¡Acabo de intentarlo de nuevo y me tomó 132 pulsaciones F11 clave! Ahora tiene sentido, pero no es práctico. Sin embargo, corregiré mi pregunta. Carles Alcolea 7 de mayo de 2014 a las 2:50 p.m.
  • @CarlesAlcolea Sí, es absolutamente impráctico, pero no imposible. Cualquiera con suficiente dedicación y tiempo en sus manos puede encontrar cualquier cosa hecha en HTML y JavaScript, incluso si está profundamente escondida y minimizada. Siéntase libre de marcar la respuesta de Alexander Pavlov, o la mía, como aceptada. Jesse 7 de mayo de 2014 a las 2:57
  • 1
    sí, acabo de terminar ahora mismo. Para su información, si aún no lo sabía, si hace clic en el botón de llaves hacia abajo a la izquierda ( i.imgur.com/ALoMQkR.png ) en un script minificado, lo "embellecerá" y también funcionará mientras se depura. Carles Alcolea 7 de mayo de 2014 a las 3:44
  • A partir de 2014, Chrome incorporó una función de caja negra en las herramientas de desarrollo de Chrome, lo que elimina la necesidad del número 1 anterior. Brian 14 de noviembre de 2014 a las 3:32
  • 1
    @Brian y aquí hay una publicación de blog que detalla los scripts de boxeo negro . Cristian Diaconescu 10 feb.15 a las 16:28
172

Solución 1: Marco de blackboxing

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

Según la documentación de Chrome :

What happens when you blackbox a script?

Exceptions thrown from library code will not pause (if Pause on exceptions is enabled), Stepping into/out/over bypasses the library code, Event listener breakpoints don't break in library code, The debugger will not pause on any breakpoints set in library code. The end result is you are debugging your application code instead of third party resources.

Aquí está el flujo de trabajo actualizado:
  1. Abra Chrome Developer Tools ( F12o + + i), vaya a la configuración (arriba a la derecha o F1). Busque una pestaña a la izquierda llamada " Blackboxing "

ingrese la descripción de la imagen aquí

  1. 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)
  2. Si desea omitir archivos con múltiples patrones , puede agregarlos usando el carácter de barra vertical, |así: jquery\..*\.js|include\.postload\.js(que actúa como un "o este patrón", por así decirlo. O siga agregándolos con el botón "Agregar".
  3. Ahora continúe con la Solución 3 que se describe a continuación.

Bonus tip! I use Regex101 regularly (but there are many others: ) to quickly test my rusty regex patterns and find out where I'm wrong with the step-by-step regex debugger. If you are not yet "fluent" in Regular Expressions I recommend you start using sites that help you write and visualize them such as http://buildregex.com/ and https://www.debuggex.com/

También puede utilizar el menú contextual cuando trabaje en el panel Fuentes. Al ver un archivo, puede hacer clic con el botón derecho en el editor y elegir Blackbox Script. Esto agregará el archivo a la lista en el panel de Configuración:

ingrese la descripción de la imagen aquí


Solución 2: Evento visual

ingrese la descripción de la imagen aquí

Es una excelente herramienta para tener :

Visual Event is an open-source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements. Visual Event shows:

  • Which elements have events attached to them
  • The type of events attached to an element
  • The code that will be run with the event is triggered
  • The source file and line number for where the attached function was defined (Webkit browsers and Opera only)


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 de JS que será útil conocer. Deberías aplicar el blackboxing aquí para evitar una pesadilla.

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

  1. Abra Herramientas de desarrollo -> pestaña Fuentes y, a la derecha, busque Event Listener Breakpoints:

    ingrese la descripción de la imagen aquí

  2. Expandir Mousey seleccionarclick

  3. Ahora haga clic en el elemento (la ejecución debería pausarse) y ahora está depurando el código. Puede revisar todos los códigos presionando F11(que es Ingresar ). 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 todo el código base (todo el código en todos los archivos) con + + Fo:

ingrese la descripción de la imagen aquí

y al buscar #envioo lo que sea, la etiqueta / clase / identificación que crea que comienza la fiesta y es posible que llegue a algún lugar más rápido de lo previsto.

Tenga en cuenta que a veces no solo hay imgmuchos 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 .

5
  • ¿No pudiste encontrar blackboxing en ningún lado? Prueba: chrome: // flags / # enable-devtools-experimentruuter 2 de diciembre de 2016 a las 18:43
  • 1
    @CarlesAlcolea IMPRESIONANTE !! ¡Me acabas de ahorrar TONELADAS de tiempo con este truco! Prix 2 abr 2017 a las 5:04
  • ¿Alguien sabe por qué cuando se ejecuta un evento visual, la página se actualiza sola, perdiendo así toda la información? Edu Castrillon 24 de mayo de 2017 a las 7:44
  • Para la solución 1, necesitaría hacer clic en los puntos suspensivos en la esquina extrema derecha para tener acceso a la CONFIGURACIÓN COMPLETA DE LAS HERRAMIENTAS DE CROMO o presionar F1 cuando DevTools esté abierto. Ahora verá la pestaña BlackBoxing como en el lado izquierdo. ¡Disfrutar! pensebien 27/02/18 a las 7:44
  • 1
    Parece que la nueva mejor manera de crear scripts de caja negra es increíblemente fácil. Simplemente vaya a ese archivo en el panel Fuentes y haga clic derecho en el archivo (no en su elemento de lista a la izquierda, en realidad abra el archivo y haga clic derecho en el archivo), luego seleccione "Blackbox this script". ¡Ahí tienes! Dan 30/08/18 a las 14:39
17

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

Dicho esto, la depuración de marcos puede ser tediosa exactamente por esta razón. Para solucionar el problema, puede habilitar el experimento "Habilitar compatibilidad con la depuración de marcos" . ¡Feliz depuración! :)

1
  • Esto funciona perfectamente (y tienes razón, me perdí el salto), lo agregaré a mi pregunta. También me ha obligado a volver a leer los patrones de expresiones regulares: P Gracias. Carles Alcolea 7 de mayo de 2014 a las 3:18
7

Puede utilizar 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:

  • elemento
    El elemento real donde se registró el controlador de eventos en
  • events
    Matriz con información sobre los controladores de eventos jquery para el tipo de evento que nos interesa (por ejemplo, hacer clic, cambiar, etc.)
  • controlador
    Método de controlador 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 de documento y tiene como destino todos los botones de una página, esta propiedad enumerará todos los botones de la página. Puede colocarlos sobre ellos y verlos resaltados en cromo.

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

4

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. Profundice en la salida para encontrar el controlador de eventos deseado.
  4. Haga clic con el botón 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 :

As of jQuery 1.8, the event data is no longer available from the "public API" for data. Read this jQuery blog post. You should now use this instead:

jQuery._data( elem, "events" ); elem should be an HTML Element, not a jQuery object, or selector.

Please note, that this is an internal, 'private' structure, and shouldn't be modified. Use this for debugging purposes only.

In older versions of jQuery, you might have to use the old method which is:

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

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

1
  • 2
    Gracias por aportar más ideas. Esta es otra forma de hacerlo. La desventaja es que necesita jQuery y el título de esta pregunta pide que solo confíe en las herramientas de Chrome. Editaré su respuesta para dejar en claro que es un método jQuery y también usaré algo más razonable que "LA MEJOR SOLUCIÓN DE TODOS" :) Por favor, eche un vistazo a stackoverflow.com/help/how-to-answerCarles Alcolea 5 oct 2017 a las 2:00