Tengo un personalizables elemento de formulario en una página de una biblioteca. Quiero ver lo que javascript eventos se activan cuando me relaciono con ella porque estoy tratando de averiguar qué controlador de eventos para el uso.

¿Cómo puedo hacer que el uso de Chrome Web Developer?

InformationsquelleAutor John Hoffman | 2012-04-18

5 Comentarios

  1. 794
    • Pulse F12 para abrir Dev Tools
    • Haga clic en la ficha Fuentes de
    • En la parte derecha, desplácese hacia abajo para «Detector de Eventos puntos de interrupción», y expanda el árbol de
    • Haga clic en los eventos que desea escuchar.
    • Interactuar con el elemento de destino, si el fuego tendrá un punto de quiebre en el depurador

    Del mismo modo, usted puede hacer clic derecho en el elemento objetivo -> seleccionar «inspeccionar elemento» Desplácese hacia abajo en el lado derecho de la dev marco, en la parte inferior es el ‘caso de los oyentes. Expanda el árbol para ver qué eventos están conectados al elemento. No estoy seguro si esto funciona para los eventos que se manejan a través de burbujeo (supongo que no)

    • esta solución es un problema si es que los eventos de ratón, usted está después de, como el punto de interrupción mata el flujo de
    • ¿y si todos los eventos, seleccione record de jquery no me importa, ¿cómo puedo llegar a la función que utiliza jquery.
    • Puede mostrar los eventos personalizados que fueron creadas por mí? Cuando he leído que cambió la vida que fue el primero que pensé. ¿Me olvido de algo?
    • Usted puede blackbox jQuery para Chrome saltar e ir directamente a su código fuente. developer.chrome.com/devtools/docs/blackboxing
    • He comprobado el marco de los oyentes de los detectores de eventos, pero aún así no ver los detectores de eventos para la columna vertebral. Alguna idea?
    • ¿qué pasa si usted acaba de dejar de usar JQuery?
    • Para escapar de jquery, simplemente paso de cada llamada de función hasta que llegue a su propia. Shift-F11 es «un Paso»

  2. 727

    Puede utilizar monitorEvents función.

    Sólo inspeccionar elemento (right mouse clickInspect en elemento visible o ir a Elements pestaña en Chrome Developer Tools y seleccione quería elemento), a continuación, vaya a Console pestaña y escribir:

    monitorEvents($0)

    Ahora al mover el ratón sobre este elemento, el enfoque o haga clic en él, el nombre del evento activado se mostrará con sus datos.

    Para dejar de recibir estos datos, simplemente escribir esto en consola:

    unmonitorEvents($0)

    $0 es sólo el último elemento de DOM seleccionado por Herramientas para Desarrolladores de Chrome. Usted puede pasar a cualquier otro objeto DOM (por ejemplo de resultado de getElementById o querySelector).

    También puede especificar evento «tipo» como segundo parámetro para limitar monitoreados eventos a un conjunto predefinido. Por ejemplo:

    monitorEvents(document.body, 'mouse')

    Lista de tipos disponibles es aquí.

    Hice un pequeño gif que muestra cómo funciona esta característica:

    ¿Cómo puedo ver los eventos desencadenados en un elemento en Chrome DevTools?

    • esta respuesta es mucho mejor y hace exactamente lo que se les pide (tal vez esa característica no estaba disponible en 2012)
    • este debe ser el nuevo aceptado respuesta
    • De acuerdo. Este es el «de facto» para controlar y rastrear los eventos en específico elementos.
    • ¿Todavía funciona? Me sale «undefined» en la consola cuando escribo esto y no hay supervisión parece estar ocurriendo.
    • Lo he comprobado en las últimas Chrome y sigo trabajando
    • Ah, sí veo. Fue el «indefinido» que me arrojando pero ahora veo que tiene el mismo en su útil GIF animado. Gracias.
    • Es allí una manera de utilizar mientras se carga la página?
    • la herramienta que se hizo el uso u para hacer gif
    • href=»https://screentogif.codeplex.com/» >screentogif.codeplex.com buena aplicación.
    • Sólo se devuelve undefined, en la misma manera que cualquier javascript función devuelve undefined si no hay valor de retorno. Usted puede probar en el nodo repl > var silent = function() { }; no definido > silent(); no definido > bla(); ReferenceError: bla no está definido
    • Cada tan a menudo te encuentras con una punta que se siente como un subir de nivel. Esta es una de esas veces.
    • Cómo proceder a partir de aquí? Hice esto y encontró el evento click, que fue el evento de que yo estaba interesado en el. Pero ¿cómo puedo saber qué pasa cuando hago clic en el elemento? Qué tipo de código se ejecuta? Que la propiedad de MouseEvent debo estar buscando?
    • pero, ¿dónde encontrar controlador de e.g haga clic en controlador.
    • El undefined aviso es tan confuso. Por el contrario, debe mostrar ready en la consola …
    • No en la ventana, pero en extensión de área o extensión determinada

  3. 26

    Evento Visual es un bonito pequeño script que puede utilizar para ver un elemento controladores de eventos. En la demostración en línea puede ser visto aquí.

    • no puede ser utilizado como un ejército suizo herramienta. desde mi punto de vista es para los novatos.
  4. 19

    Para jQuery (al menos la versión 1.11.2) el siguiente procedimiento trabajó para mí.

    1. Clic derecho en el elemento y abrir «Herramientas para Desarrolladores de Chrome’
    2. Tipo $._data(($0), 'events'); en la ‘Consola’
    3. Ampliar los objetos embargados y haga doble clic en el handler: valor.
    4. Esto muestra el código fuente de la función de búsqueda para la parte de que el uso de la ‘Búsqueda’ de la pestaña.

    Y es hora de dejar de re-inventar la rueda y empezar a utilizar la vainilla JS eventos … 🙂

    ¿Cómo puedo ver los eventos desencadenados en un elemento en Chrome DevTools?

  5. 15

    Esto no mostrar eventos personalizados como los que la secuencia de comandos podría crear si es un plugin de jquery. por ejemplo :

    jQuery(function($){
     var ThingName="Something";
    
     $("body a").live('click', function(Event){
       var $this = $(Event.target);
           $this.trigger(ThingName + ":custom-event-one");
     });
    
     $.on(ThingName + ":custom-event-one", function(Event){
       console.log(ThingName, "Fired Custom Event: 1", Event);
     })
    
    });

    El Evento en el Panel de Scripts en herramientas para desarrolladores de chrome no mostrar «Algo:personalizado-caso-uno»

    • Entonces, ¿cómo hace uno para encontrar a esos eventos?

Dejar respuesta

Please enter your comment!
Please enter your name here