Estoy usando Chrome y mi propio sitio web.

Lo que yo sé desde el interior:

1) tengo un formulario donde a la gente a inscribirse haciendo clic en este naranja de la imagen-botón:

Cómo encontrar lo que el código se ejecuta mediante un botón a/elemento de Chrome, el uso de Herramientas de Desarrollador

2) me observarlo, 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 secuencia de comandos de fuentes. De
supuesto, sé que el botón de llamadas, lo programé
: <script src="js/jquery2.js" type="text/javascript"></script>

4) Dentro de ese archivo, usted podría encontrar: $(".formSend").click(function() { ... }); que es lo que se activa mediante el botón (para hacer una forma bastante compleja de validación y enviar) y lo que yo quiero es ser capaz de encontrar que usando chrome dev tools en cualquier sitio web.

¿Cómo podemos saber de dónde viene el elemento de la llamada?


Oyentes ficha no funciona para mí

Entonces he intentado buscar el evento click de los oyentes, que parecía una apuesta segura para mí, pero… no hay jquery2.js allí (y yo no sé realmente qué archivo el código es así que me gustaría perder el tiempo de la comprobación de todos estos…):

Cómo encontrar lo que el código se ejecuta mediante un botón a/elemento de Chrome, el uso de Herramientas de Desarrollador

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

Jesse explica por qué en su respuesta:

«Finalmente, la razón por la que su función no está directamente vinculado al controlador de eventos click es porque jQuery devuelve una función que obtiene enlazado. jQuery es función a su vez pasa a través de algunas capas de abstracción y cheques, y en algún lugar, se ejecuta su función».

EDICIÓN: he recogido todos los métodos surgió esta pregunta en una respuesta de abajo según lo sugerido por algunos de ustedes.

  • Normalmente yo uso el Visual Event bookmarklet. Detecta los eventos de clic obligado por las bibliotecas populares y crea una superposición del sitio mostrando donde los acontecimientos están enlazados y dando muestras de código y las ubicaciones de origen para cada evento.
  • Pero que gana a la totalidad de la pregunta. Supongamos que tengo decenas de *.js archivos en la web, ¿cómo saber el código que se activa mediante el botón que está dentro de jquery2.js?
  • Sí, se me olvidaba, a veces puedo usar el «Evento Visual» Extensión de Chrome. Voy a actualizar el post para que la gente pueda ver pero que está fuera de Dev Tools, que es el punto principal de la cuestión. Es realmente imposible con sólo chrome dev tools?
  • Sí, simplemente porque el navegador no hacer que la información disponible. Evento Visual lo hace por la orientación de los eventos obligado por las bibliotecas populares.
  • Entiendo lo Visual Evento funciona (gracias por CIERTO), pero cuando haga clic en ese botón, el navegador conoce a la perfección lo que para ejecutar, porque corre. Sólo quiero para asegurarse de que no se puede hacer con herramientas dev y yo voy a seguir adelante.
  • Si usted sabe lo que la biblioteca se utiliza para enlazar el evento, se puede averiguar el uso de la biblioteca, pero que yo sepa no hay otra manera. la api del dom que no exponga los eventos ligados al uso de addEventListener en una forma que permita que los veas.
  • Gracias por el Evento Visual recomendación, y CarlesAlcolea por la pregunta que le pide. He querido manera de hacer esto antes y estoy feliz de saber que una herramienta (aunque de terceros) existe.
  • Has probado a ‘romper en la siguiente expresión’? No va a funcionar, aunque si el botón controla el ratón entrar/salir – pero si el único evento que ha sido suscrito por clic – se debe trabajar.
  • ¿cómo puedo hacer eso? No he encontrado nada en google «descanso en la siguiente expresión» y combinaciones similares
  • Lo siento, se llama pausa la ejecución del script. Se accede a él por F12 -> Fuente -> pulse el botón de «pausa» en la parte izquierda del grupo de control con la pila de llamadas, puntos de corte, etc… Pero es muy propenso a global ratón sobre etc controladores – para gestionar sus expectativas 🙂
  • Sí, usted no puede llegar a ninguna parte con eso. Gracias por tirar ideas, aunque.
  • Buena pregunta, yo definitivamente creo que esta es una característica de Chrome (o Firefox), debe tener
  • Si has encontrado la respuesta a esta pregunta, por favor agregarlo como una respuesta. Respondiendo propia pregunta es muy útil, pero respondiendo por la edición que usted pregunta es no.
  • He contestado a mi propia pregunta (en mi OP porque eso es lo que empezó a darle a mi pobre e insatisfactorio soluciones) y se recogen y respuesta (Alexander Pavlov). Creo que no entiendo lo que quieres decir.
  • Una pregunta es una pregunta, no una respuesta. Se han incluido algunas de las soluciones (aka respuestas) en este post (una pregunta).
  • He encontrado un blog: divshot.com/blog/tips-and-tricks/…

5 Comentarios

  1. 195

    Alexander Pavlov respuesta obtiene el más cercano a lo que usted desea.

    Debido a la extensión de jQuery, la abstracción y la funcionalidad, una gran cantidad de aros tienen que ser saltado en el fin de llegar a la carne del evento. He creado este jsFiddle para demostrar el trabajo.


    1. Configurar el Detector de Eventos de punto de interrupción

    Que estaban cerca de este.

    1. Abrir el Chrome Dev Tools (F12), y vaya a la ficha Fuentes.
    2. Profundizar Ratón -> haga Clic

      Cómo encontrar lo que el código se ejecuta mediante un botón a/elemento de Chrome, el uso de Herramientas de Desarrollador

      (haga clic para ampliar)

    2. Haga clic en el botón!

    Chrome Dev Tools pondrá en pausa la ejecución del script, y presentar a ustedes este hermoso enredo de record de código:

    Cómo encontrar lo que el código se ejecuta mediante un botón a/elemento de Chrome, el uso de Herramientas de Desarrollador
    (haga clic para ampliar)


    3. Encontrar la gloriosa código!

    Ahora, el truco aquí es no dejarse llevar de pulsar la tecla, y mantener un ojo fuera de la pantalla.

    1. Pulse el botón F11 clave (Paso) hasta conseguir el código fuente aparece
    2. Código fuente, finalmente llegaron a
      • En el jsFiddle ejemplo anterior, he tenido a pulse F11 108 veces antes de llegar a la deseada controlador de evento/función
      • Su kilometraje puede variar, dependiendo de la versión de jQuery (o en el marco de la biblioteca) se utiliza para enlazar los eventos
      • Con suficiente dedicación y tiempo, usted puede encontrar cualquier controlador de evento/función

    Cómo encontrar lo que el código se ejecuta mediante un botón a/elemento de Chrome, el uso de Herramientas de Desarrollador


    4. Explicación

    No tengo la respuesta exacta, o una explicación de por qué jQuery va a través de los muchos niveles de abstracción que hace – todo lo que puedo sugerir es que es por el trabajo que hace abstract inmediatamente su uso desde el navegador de ejecutar el código.

    Aquí es un jsFiddle con una versión de depuración de jQuery (es decir, no record). Cuando se mira el código en la primera (no-record) punto de interrupción, se puede ver que el código es el manejo de 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 lo perdieron en su intento, cuando el «se detiene la ejecución y salto de línea por línea«, es porque puede que haya utilizado el «Paso a Través» de la función, en lugar de Paso. Aquí está una Respuesta de StackOverflow explicar las diferencias.

    Finalmente, la razón por la cual su función es no directamente vinculado al controlador de eventos click es porque jQuery devuelve una función que obtiene enlazado. jQuery es función a su vez pasa a través de algunas capas de abstracción y cheques, y en algún lugar allí, se ejecuta la función.

    • Wow, eres y @Alexander Pavlov totalmente a la derecha, me lo perdí. Ahora he intentado de nuevo y me lleva 132 F11 clave de éxitos! Ahora tiene sentido, pero es poco práctico. Voy a corregir mi pregunta, sin embargo.
    • Yup – es absolutamente práctico, pero no imposible. Cualquier persona con la suficiente dedicación y el tiempo en sus manos puede encontrar cualquier cosa hecha en HTML y JavaScript, aunque escondido profundamente y record. Siéntase libre de marca Alexander Pavlov respuesta, o de la mía, como aceptado.
    • sí, estoy terminando ahora. Para su INFORMACIÓN, si usted no lo sabe ya, si hace clic en el desplegable de la izquierda llaves botón a (i.imgur.com/ALoMQkR.png) en un record de script, «embellecer», y trabajará durante la depuración demasiado.
    • Sí, bueno punta. Me sigue olvidando que existe. Gracias!
    • A partir de 2014 Chrome ha construido en una caja de color negro característica en Chrome Dev Herramientas que elimina la necesidad de #1.
    • y aquí un post en el blog detallando negro-boxeo scripts.
    • Realmente bonito, no sabía que podía punto de interrupción en los clics y esas cosas
    • Por curiosidad, ¿por qué nos Paso En el vs Pisar el código?
    • cuando paso a través de código mediante el uso de un depurador, «Paso» indica que el depurador paso a paso el código fuente de la función actual; mientras que «Stet Sobre» simplemente se salta la función del código fuente y se mueve a la siguiente línea de código actual. he Aquí una respuesta más detallada de lo que puedo ofrecer en un comentario (se incluye un ejemplo – aun cuando se le pregunta acerca de Firebug, la terminología y la funcionalidad es la misma). Para responder a tu pregunta: si «paso más» es probable que omita el código que controla el evento.

  2. 145

    Solución 1: Marco blackboxing

    De las grandes obras, una configuración mínima y no de terceros.

    Según Chrome documentación:

    Lo que sucede cuando usted blackbox un script?

    Excepciones desde el código de la biblioteca no pausa (si Pausa en
    excepciones está habilitado), entrando en/fuera de/sobre omite la biblioteca
    código detector de Eventos puntos de interrupción no se rompen en el código de la biblioteca, La
    depurador no pausa en cualquiera de los puntos de corte establecidos en el código de la biblioteca. El
    el resultado final es está depurando el código de la aplicación en lugar de la tercera
    parte de los recursos.

    Aquí está la actualización del flujo de trabajo:

    1. Pop abrir Herramientas para Desarrolladores de Chrome (F12 o ++yo), vaya a configuración (arriba a la derecha, o F1). Encontrar una ficha de la izquierda llamada «Blackboxing«

    Cómo encontrar lo que el código se ejecuta mediante un botón a/elemento de Chrome, el uso de Herramientas de Desarrollador

    1. Este es donde se pone el RegEx patrón de los archivos que desea Chrome ignorar durante la depuración. Por ejemplo: jquery\..*\.js (glob patrón/humanos traducción: jquery.*.js)
    2. Si desea omitir los archivos con múltiples patrones de usted puede agregar el uso de la tubería de carácter, |, así: jquery\..*\.js|include\.postload\.js (que actúa como una «o este patrón», por así decirlo. O mantener la adición de ellos con el botón «Agregar».
    3. Ahora siguen Solución 3 se describe abajo.

    Bono de punta! Yo uso Regex101 regularmente (pero hay muchos otros: ) para probar rápidamente mi rusty patrones de regex y averiguar donde estoy equivocado con el paso a paso de regex depurador.
    Si usted aún no es «fluido» en Expresiones Regulares recomiendo empezar a usar los sitios que te ayudan a escribir y visualizar como http://buildregex.com/ y https://www.debuggex.com/

    También puede utilizar el menú contextual cuando se trabaja en las Fuentes del panel. Cuando la visualización de un archivo, usted puede hacer clic derecho en el editor y elija Blackbox secuencia de Comandos. Este, el archivo se añadirá a la lista en el panel de Configuración:

    Cómo encontrar lo que el código se ejecuta mediante un botón a/elemento de Chrome, el uso de Herramientas de Desarrollador

    Solución 2: Evento Visual

    Cómo encontrar lo que el código se ejecuta mediante un botón a/elemento de Chrome, el uso de Herramientas de Desarrollador

    Es una excelente herramienta para tener:

    Evento Visual es un código abierto Javascript bookmarklet que proporciona
    la depuración de la información acerca de los eventos que se han adjuntado a DOM
    elementos. Evento Visual muestra:

    • Que los elementos de acontecimientos que han unido a ellos
    • El tipo de eventos asociado a un elemento
    • El código que se ejecutará con el evento se activa
    • El archivo de origen y el número de línea donde se adjunta la función fue definida (los navegadores Webkit y Opera sólo)

    Solución 3: Depuración

    Puede hacer una pausa en el código cuando se haga clic en algún lugar de la página, o cuando el DOM está modificado… y otros tipos de JS puntos de interrupción que será de utilidad para conocer. Usted debe aplicar blackboxing aquí para evitar una pesadilla.

    En este caso, quiero que sepa exactamente qué es lo que pasa cuando hago clic en el botón.

    1. Abrir Dev Herramientas -> ficha Fuentes, y en el derecho de encontrar Event
      Listener Breakpoints
      :

      Cómo encontrar lo que el código se ejecuta mediante un botón a/elemento de Chrome, el uso de Herramientas de Desarrollador

    2. Ampliar Mouse y seleccione click

    3. Ahora haga clic en el elemento (ejecución de una pausa), y ahora la depuración del código. Usted puede ir a través de todo el código pulsando F11 (que es Paso en). O volver un par de saltos en la pila. No puede ser que un tonelada de saltos

    Solución 4: la Pesca de palabras clave

    Con Herramientas Dev activado, usted puede buscar en toda la base de código (el código de todos en todos los archivos) con ++F o:

    Cómo encontrar lo que el código se ejecuta mediante un botón a/elemento de Chrome, el uso de Herramientas de Desarrollador

    y la búsqueda #envio o cualquiera que sea la etiqueta/clase/id crees que se inicia el partido y puede llegar a algún lugar más rápido de lo previsto.

    Ser conscientes de que a veces no hay solo una img pero un montón de elementos apilados, y usted no puede saber que uno activa el código.

    Si esto es un poco fuera de su conocimiento, echa un vistazo a Chrome tutorial sobre la depuración de.

    • No se pudo encontrar blackboxing en cualquier lugar? Probar: chrome://flags/#enable-devtools-experimentos
    • IMPRESIONANTE!! Usted sólo me salvó un montón de tiempo con este truco!
    • alguien sabe por qué cuando se ejecuta visual de eventos de la página se actualizará a sí mismo, perdiendo así toda la información?
    • Para la solución 1, usted necesita para hacer clic en los puntos suspensivos en la esquina derecha para tener acceso a toda la CHROME DEVTOOLS CONFIGURACIÓN o bien pulse F1 cuando DevTools está abierto. Ahora bien, usted podría ver el BlackBoxing como pestaña en el lado izquierdo. ¡A disfrutar!
    • Parece que la mejor manera de blackbox scripts es sorprendentemente fácil. Basta con ir a ese archivo en las Fuentes del panel y haga clic derecho EN el archivo (no EN su elemento de la lista de la izquierda, abrir el archivo y haga clic derecho EN el archivo), a continuación, seleccione «caja negra esta secuencia de comandos». Hay que ir!
  3. 16

    Suena como el «…y yo salto de línea por línea…» parte que está mal. Qué Pasada o StepIn y ¿estás seguro de no querer perder la convocatoria correspondiente?

    Que dijo, la depuración de marcos puede ser tedioso exactamente por esta razón. Para aliviar el problema, puede activar la opción «Habilitar los marcos de soporte de depuración» experimento. Feliz de depuración! 🙂

    • Esto funciona perfectamente (y tienes razón, me perdí el salto), voy a agregar a mi pregunta. También ha me obligó a volver a leer los patrones de regex de nuevo 😛 Gracias.
  4. 7

    Puede utilizar findHandlersJS

    Usted puede encontrar el controlador haciendo en el chrome de la consola:

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

    Se obtendrá la siguiente información impresa en chrome consola:

    • elemento

      El elemento real donde el controlador de eventos se registró en
    • eventos

      Matriz con la información acerca de los eventos de jquery controladores para el tipo de evento que nos interesa (por ejemplo, haga clic en, cambio, etc)
    • controlador

      Real método de controlador de eventos que se puede ver haciendo clic derecho y seleccionando Mostrar la definición de la función
    • selector

      El selector proporcionada por delegados de los eventos. Va a estar vacío para dirigir los acontecimientos.
    • objetivos

      Lista con los elementos que este controlador de eventos objetivos. Por ejemplo, para un delegado de controlador de eventos que se registran en el documento objeto y los objetivos de todos los botones en una página, esta propiedad encontrará la lista de todos los botones de la página. Puedes pasar el ratón por ellos y ver resaltado en chrome.

    Más info aquí y se puede probar en este sitio de ejemplo aquí.

  5. 4

    Esta solución de necesidades de la jQuery método de datos.

    1. Abrir Chrome de la consola (aunque cualquier navegador con jQuery cargado de trabajo)
    2. Ejecutar $._data($(".example").get(0), "events")
    3. Profundizar la salida para encontrar la deseada controlador de eventos.
    4. Haga clic en «controlador» y seleccione «Mostrar la definición de la función»
    5. El código se muestra en la ficha Fuentes de

    $._data() es sólo acceder a jQuery método de datos. Más legible alternativa podría ser jQuery._data().

    Punto interesante por este MODO de respuesta:

    Como de jQuery 1.8, los datos del evento es que ya no
    disponible a partir de la «API pública» para los datos. Leer este jQuery blog.
    Ahora deberá utilizar esto en su lugar:

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

    Por favor, tenga en cuenta que esta es una interna, ‘privado’ de la estructura, y
    no debe ser modificado. El uso de este sólo con fines de depuración.

    En más viejas versiones de jQuery, usted podría tener que utilizar el viejo método de
    que es:

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

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

    • Gracias por tirar más ideas. Esta es otra manera de hacerlo. La desventaja es que necesita jQuery y el título de esta pregunta se le pide a confiar sólo en Chrome herramientas. Voy a editar su respuesta a dejar claro que es un método jQuery y también el uso de algo más razonable que la MEJOR SOLUCIÓN SIEMPRE» 🙂 por Favor, eche un vistazo a stackoverflow.com/help/how-to-answer

Dejar respuesta

Please enter your comment!
Please enter your name here