Ho un elemento modulo personalizzabile su una pagina da 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 visualizzare gli eventi attivati su un elemento in Chrome DevTools?
Come faccio a farlo utilizzando Chrome Web Developer?
Allo stesso modo, è possibile fare clic destro sul elemento di destinazione -> selezionare "Inspect Element" Scorrere verso il basso sul lato destro del frame di sviluppo, in basso sono 'ascoltatori di eventi'. Espandi l'albero per vedere quali eventi sono collegati all'elemento. Non sono sicuro se questo funziona per eventi gestiti tramite gorgogliamento (non sto supponendo)
questa soluzione è un problema se sono gli eventi del mouse che stai cercando, come il breakpoint uccide il flusso – WendyG
e se tutti gli eventi puntano a jquery min non mi interessa, come faccio a raggiungere la funzione che utilizza quel jquery. –
Può mostrare eventi personalizzati che sono stati creati da me? Quando ho letto che ha cambiato la vita è stata la prima cosa a cui ho pensato. Mi manca qualcosa? – Tebe
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 di eventi in Script in strumenti di Chrome per sviluppatori non vi mostrerà "Qualcosa: custom-evento-one"
Come si trovano quegli eventi? – Calydon
È possibile utilizzare la funzione monitorEvents.
Basta ispezionare il vostro elemento (right mouse click → Inspect sul elemento visibile o andare a Elements scheda in Chrome Developer Tools e selezionare elemento desiderato) poi vai a Console scheda e scrivere:
monitorEvents($0)
Ora, quando si sposta il mouse sopra questo elemento, focus o clic su di esso, il nome dell'evento infornato verrà visualizzato con i suoi dati.
Per interrompere ottenere questi dati basta scrivere questo per console:
unmonitorEvents($0)
$0 è solo l'ultimo elemento DOM selezionato da Chrome Developer Tools. È possibile passare qualsiasi altro oggetto DOM lì (ad esempio il risultato di getElementById o querySelector).
È anche possibile specificare l'evento "tipo" come secondo parametro per limitare gli eventi monitorati ad un gruppo predefinito. Ad esempio:
monitorEvents(document.body, 'mouse')
L'elenco di questi tipi disponibili è here.
ho fatto un piccolo gif che illustra il funzionamento di questa funzione:
questa risposta è molto meglio e fa esattamente quello che è stato chiesto (forse quella caratteristica non era disponibile nel 2012) – llamerr
questa dovrebbe essere la nuova risposta accettata – jpwynn
concordata. Questo è il modo de facto per monitorare e rintracciare eventi su elementi * specifici *. – dmackerman
Visual Event è un po 'bookmarklet bello che è possibile utilizzare per visualizzare i gestori di eventi di un elemento.Sulla demo online può essere visualizzato here.
non può essere usato come strumento dell'esercito svizzero.dal mio punto di vista è per i principianti. –
Disponibile anche come estensione Chrome: https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim – pelms
grazie ha funzionato bene per me –
Per jQuery (almeno la versione 1.11.2) la procedura seguente ha funzionato per me.
$._data(($0), 'events'); inhandler:.Ed è il momento di smettere di re-inventare la ruota e iniziare a utilizzare gli eventi di vaniglia JS ... :)
Questo bookmarklet può essere utile: http://www.sprymedia.co .uk/article/Visual + Event + 2 – scytale
La risposta qui è valida, ma il bookmarklet sopra^è in realtà ciò che ha risolto il mio problema. http://www.sprymedia.co.uk/article/Visual+Event+2 – Jazzy