javascript - significa - ¿Cómo veo los eventos activados en un elemento en Chrome DevTools?

que significa paused in debugger

Question

Tengo un elemento de formulario personalizable en una página de una biblioteca. Quiero ver qué eventos javascript se activan cuando interactúo con él porque estoy tratando de averiguar qué manejador de eventos usar.

¿Cómo hago eso usando Chrome Web Developer?

Answer 1

Esto no mostrará eventos personalizados como los que podría crear su script si se trata de un complemento 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 Panel de eventos en Scripts en las herramientas de desarrollo de Chrome no te mostrará "Algo: evento personalizado uno"

Answer 2

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

1. Haga clic derecho en el elemento y abra ''Chrome Developer Tools''
2. Escriba $._data(($0), ''events''); en la ''consola''
3. Expanda los objetos adjuntos y haga doble clic en el handler: valor.
4. Esto muestra el código fuente de la función adjunta, busque parte de eso usando la pestaña ''Buscar''.

Y es hora de dejar de reinventar la rueda y comenzar a usar eventos JS de vainilla ... :)

Answer 3

Puede utilizar la función monitorEvents .

Simplemente inspeccione su elemento ( right mouse click → Inspect en el elemento visible o vaya a la pestaña Elements en Chrome Developer Tools y seleccione el elemento deseado) luego vaya a la pestaña Console y escriba:

monitorEvents($0)

Ahora, cuando mueva el mouse sobre este elemento, enfoque o haga clic en él, se mostrará el nombre del evento disparado con sus datos.

Para dejar de obtener estos datos, simplemente escriba esto en la consola:

unmonitorEvents($0)

$0 es solo el último elemento DOM seleccionado por Chrome Developer Tools. Puede pasar cualquier otro objeto DOM allí (por ejemplo, el resultado de getElementById o querySelector ).

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

monitorEvents(document.body, ''mouse'')

La lista de estos tipos disponibles está here .

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

Answer 4

sprymedia.co.uk/article/Visual+Event+2 es un pequeño y agradable bookmarklet que puedes usar para ver los controladores de eventos de un elemento. En la demostración en línea se puede ver here .

Answer 5

• Pulsa F12 para abrir Dev Tools
• Haga clic en la pestaña Fuentes
• En el lado derecho, desplácese hacia abajo hasta "Puntos de interrupción del detector de eventos" y expanda el árbol
• Haga clic en los eventos que desea escuchar.
• Interactúa con el elemento objetivo, si se disparan, obtendrás un punto de interrupción en el depurador

Del mismo modo, puede hacer clic con el botón derecho en el elemento de destino -> seleccionar "inspeccionar elemento" Desplácese hacia abajo en el lado derecho del cuadro de desarrollo, en la parte inferior encontrará "detectores de eventos". Expanda el árbol para ver qué eventos se adjuntan al elemento. No estoy seguro de si esto funciona para eventos que se manejan a través del burbujeo (supongo que no)