2012-06-22 15 views
6

Abbiamo un'applicazione web molto intensiva per JS, basata in gran parte sui binding di jQuery live (in realtà lo stiamo facendo da prima di jQuery v1.7).jQuery debug di eventi in Chrome

Chrome costruito in strumenti di sviluppo sono grandi, ma c'è un problema che continua a verificarsi che trovo sempre quasi impossibile eseguire il debug con loro: volte le mie live gestori non sono chiamati a causa di un gestore precedente arresto del bubbling degli eventi.

C'è un modo che posso dire a Chrome (o in effetti Firebug o un'altra estensione o bookmarklet (preferibilmente gratuito!) A interruzione sul prossimo gestore di eventi al di fuori del codice della libreria jQuery. In questo modo ho potuto semplicemente fare clic sul pulsante e vedere quale evento se sparava, passo e vedere quando interrompo accidentalmente la propagazione?

In caso negativo, c'è una buona ragione per cui no? Può essere fatto?

risposta

3

Nei DevTools Chrome è possibile impostare un punto di interruzione dal tipo di evento:

https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#listeners

Non è possibile escludere eventi jQuery però.

BTW si dovrebbe usare delegate anziché dal vivo()

+0

Ho provato questo e sto lottando. Questo entrerà nel codice della libreria jQuery. Non riesco a trovare la parte della libreria jQuery che chiama (o applica) le funzioni dell'evento che gli vengono assegnate. Non penso ci sia alcun vantaggio nel cambiare a 'delegate' o perché dovrebbero essere tutti nella parte superiore dell'albero DOM (forse pochissimi non lo farebbero). Inoltre entrambe le funzioni sono ora deprecate. Quando avremo tempo, ci sposteremo su ['on'] (http://api.jquery.com/on/) – Connell

+0

delegato è stato deprecato, è stato sostituito da" on " –

+0

Poiché questo thread è stato scritto il team di DevTools ha anche introdotto la possibilità di utilizzare gli script blackbox, il che aiuta davvero con cose come questa. Vedi https://developer.chrome.com/devtools/docs/blackboxing – Thomas

7

Si potrebbe rivelarsi utile: http://www.sprymedia.co.uk/article/Visual+Event+2

Javascript bookmarklet chiamato visiva evento che mostra visivamente gli elementi di una pagina che hanno eventi sottoscritti a loro , quali sono questi eventi e la funzione che l'evento verrebbe eseguito quando attivato ...

Si scopre che non esiste un metodo standard fornito dall'interfaccia DOM consigliata dal W3C per scoprire quali ascoltatori di eventi sono e collegato a un nodo particolare .... Come tale, siamo costretti a esaminare le singole librerie Javascript, che in genere mantengono una cache di eventi collegati (in modo che possano essere rimosse in seguito e possano eseguire altre utili astrazioni).

1

Oltre alla risposta DG, questo è il Chrome Extension Visual Event. Funziona perfettamente