Cómo encontrar qué código se ejecuta mediante un botón o elemento en Chrome usando las Herramientas para desarrolladores


305

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:

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 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 ... .):

ingrese la descripción de la imagen aquí

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 .


44
Usualmente 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 ejemplos de código y ubicaciones de origen para cada evento.
Kevin B

3
@DontVoteMeDown Pero eso derrota toda la pregunta. Supongamos 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

1
Entiendo cómo funciona Visual Event (gracias a ti), pero cuando haces clic en ese botón, tu navegador sabe perfectamente qué ejecutar , porque lo ejecuta. Solo quiero asegurarme de que no sea factible con las herramientas de desarrollo y seguiré adelante.
Carles Alcolea

1
Buena pregunta, definitivamente creo que esta es una característica que Chrome (o Firefox) debería tener
tomysshadow

1
Si ha encontrado la respuesta a esta pregunta, agréguela como respuesta. Se recomienda encarecidamente responder a su propia pregunta , pero responderla editando su pregunta no.
The Guy with The Hat

Respuestas:


209

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)
    Herramientas de desarrollo de Chrome -> pestaña Fuentes -> Ratón -> Clic

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:

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 (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

Manejador / función de evento deseado


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.


Wow, usted y @ Alexander-Pavlov tienen toda la razón, lo extrañé. ¡Ahora lo he intentado nuevamente y me lleva 132 F11 golpes clave! Ahora tiene sentido, pero no es práctico. Aunque corregiré mi pregunta.
Carles Alcolea

@CarlesAlcolea Yup: es absolutamente poco práctico, pero no imposible. Cualquier persona con suficiente dedicación y tiempo en sus manos puede encontrar todo lo que se hace en HTML y JavaScript, incluso si está escondido profundamente y minimizado. Siéntase libre de marcar la respuesta de Alexander Pavlov, o la mía, como aceptada.
Jesse

1
Sí, estoy terminando ahora mismo. Para su información, si aún no lo sabía, si hace clic en el botón de las llaves rizadas a la izquierda ( i.imgur.com/ALoMQkR.png ) en un script minimizado, lo "embellecerá" y funcionará durante la depuración también.
Carles Alcolea

A partir de 2014, Chrome ha incorporado una función de cuadro negro en Chrome Dev Tools que elimina la necesidad de # 1 arriba.
Brian

1
@Brian y aquí hay una publicación de blog que detalla los guiones de boxeo negro .
Cristian Diaconescu

157

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.

Aquí está el flujo de trabajo actualizado:
  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 "

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 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".
  3. 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:

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

    ingrese la descripción de la imagen aquí

  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:

ingrese la descripción de la imagen aquí

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 .


¿No pudo encontrar blackboxing en ningún lado? Pruebe: chrome: // flags / # enable-devtools-experiment
ruuter

1
@CarlesAlcolea IMPRESIONANTE !! ¡Me acabas de ahorrar TONELADAS de tiempo con este truco!
Prix

Alguien sabe por qué cuando se ejecuta un evento visual, la página se actualizará y perderá toda la información
Edu Castrillon

Para la solución 1, deberá hacer clic en las elipses en la esquina derecha para tener acceso a la CONFIGURACIÓN DE DESPLAZAMIENTOS DE CROMO COMPLETO o, más bien, presionar F1 cuando DevTools esté abierto. Ahora vería el BlackBoxing como pestaña en el lado izquierdo. ¡Disfrutar!
Pensebien

1
Parece que la nueva mejor forma de guiones de blackbox es increíblemente fácil. Simplemente vaya a ese archivo en el panel de Fuentes y haga clic derecho en el archivo (no en su elemento de la lista a la izquierda, realmente abra el archivo y haga clic derecho en el archivo), luego seleccione "Blackbox this script". Ahí tienes!
Dan

17

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! :)


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

7

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í .


3

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');


2
Gracias por arrojar más ideas. Esta es otra forma de hacerlo. Lo malo es que necesita jQuery y el título de esta pregunta solo requiere confiar 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 NUNCA" :) Por favor, eche un vistazo a stackoverflow.com/help/how-to-answer
Carles Alcolea
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.