Come posso visualizzare gli eventi generati su un elemento in Chrome DevTools?

Ho un elemento del modulo personalizzabile su una pagina di una libreria. Voglio vedere quali eventi javascript vengono generati quando interagisco con esso perché sto cercando di scoprire quale gestore di eventi utilizzare.

Come posso farlo utilizzando Chrome Web Developer?

• Premi F12per aprire Dev Tools
• Fai clic sulla scheda Fonti
• Sul lato destro, scorrere verso il basso fino a "Punti di interruzione del listener di eventi" ed espandere l'albero
• Fai clic sugli eventi che desideri ascoltare.
• Interagisci con l'elemento bersaglio, se sparano otterrai un punto di interruzione nel debugger

Allo stesso modo, è possibile fare clic con il tasto destro del mouse sull'elemento target -> selezionare "Ispeziona elemento" Scorrere verso il basso sul lato destro del frame di sviluppo, in fondo è "listener di eventi". Espandi l'albero per vedere quali eventi sono associati all'elemento. Non sono sicuro che funzioni per eventi gestiti attraverso il gorgoglio (suppongo di no)

È possibile utilizzare la funzione monitorEvents .

Ispeziona il tuo elemento ( right mouse click→ Inspectsull'elemento visibile o vai alla Elementsscheda in Strumenti per gli sviluppatori di Chrome e seleziona l'elemento desiderato) quindi vai alla Consolescheda e scrivi:

monitorEvents($0)

Ora quando si sposta il mouse su questo elemento, si attiva o si fa clic su di esso, il nome dell'evento generato verrà visualizzato con i suoi dati.

Per interrompere la ricezione di questi dati basta scrivere questo sulla console:

unmonitorEvents($0)

$0è solo l'ultimo elemento DOM selezionato da Chrome Developer Tools. È possibile passare qualsiasi altro oggetto DOM lì (ad esempio risultato di getElementByIdo querySelector).

È inoltre possibile specificare il "tipo" di evento come secondo parametro per restringere gli eventi monitorati a un set predefinito. Per esempio:

monitorEvents(document.body, 'mouse')

L'elenco di questi tipi disponibili è qui .

Ho realizzato una piccola gif che illustra come funziona questa funzione:

Visual Event è un piccolo bookmarklet che puoi utilizzare per visualizzare i gestori di eventi di un elemento. Sulla demo online può essere visualizzato qui .

Per jQuery (almeno la versione 1.11.2) la seguente procedura ha funzionato per me.

1. Fare clic destro sull'elemento e aprire "Strumenti per sviluppatori Chrome"
2. Digita $._data(($0), 'events');"Console"
3. Espandi gli oggetti collegati e fai doppio clic sul handler:valore.
4. Questo mostra il codice sorgente della funzione allegata, cercane una parte usando la scheda 'Cerca'.

Ed è ora di smettere di reinventare la ruota e iniziare a utilizzare gli eventi JS vaniglia ... :)

Questo non mostrerà eventi personalizzati come quelli che il tuo script potrebbe creare se si tratta di un plugin jquery. per esempio :

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

});

Il pannello degli eventi in Script negli strumenti di sviluppo di Chrome non mostrerà "Qualcosa: evento-personalizzato-uno"