Come trovo gli eventi javascript misteriosamente associati

Question

Ho una complicata e complicata app HTML5 su cui sto lavorando (backbone, marionette, jquery, underscore, manubri, bootstrap, ecc.) E all'interno dell'app c'è un popup modale con una forma in esso.

Quando si apre il modale, la prima volta che si fa clic su un campo di qualsiasi modulo, il campo modulo si deseleziona. Dopo quel primo clic puoi usare il modulo normalmente. Quando l'app viene caricata in un iFrame in produzione (non chiedere) la prima volta che fai clic su un campo modulo o passa il mouse su qualsiasi pulsante, l'intera pagina scorre verso il basso fino alla parte superiore dell'elemento div il modulo si trova all'interno di il modale è in cima alla pagina, ma dopo averlo fatto una sola volta, non lo fa più (confuso ancora? Sì, è complesso e stratificato).

Non riesco a capire come iniziare a eseguire il debug di questo problema (migliaia di righe di codice, due manciate di librerie).

ho provato questi:

console.log('bound events: ', $._data(this.$el.find('#RandomFieldID')[0], 'events')); 
console.dir($('#elmId').data('events')); 
console.log('bound events: ', $._data($('body')[0], 'events')); 

Ma che ha dato nulla.

Poiché questa è una libreria su una libreria su un framework su framework non sono nemmeno sicuro da dove iniziare a cercare di trovare la cosa che ovviamente si è legata a questi campi, o anche se sono i campi a cui è legato o qualcos'altro interamente ...

Quindi, qualsiasi suggerimento su buone strategie per come eseguire il debug di un evento javascript misteriosamente associato (con più librerie JS e framework, che non possono essere solo commentati fino a quando il problema non si risolve perché sono contati in primo luogo per ottenere l'HTML per apparire sulla pagina in primo luogo)?

E, sfortunatamente, non riesco a fare un jsfiddle o qualcosa del genere perché, come ho detto, questo è molto profondo nell'app e dovrei fondamentalmente dover ricreare l'app all'interno di JSFiddle (impossibile) per collegare a un esempio (e, non è in un sito esterno di fronte, quindi, non posso semplicemente collegarlo live in produzione).

Sono perplesso. Grazie per qualsiasi aiuto!

Answer 1

Ecco come lo faccio con Chrome.

1. Ctrl-Shift-J per aprire la console Javascript.

2. Fare clic sulla piccola lente di ingrandimento in basso a sinistra, consente di selezionare un elemento con il mouse.

   

3. Clicca un elemento nella tua pagina (che metterà in evidenza come si va ad esso.) Si metterà in evidenza nel DOM in fondo e mostrare un po 'di proprietà in basso a destra.

4. In basso a destra andare fino in fondo passato, gli attributi CSS e roba verso il basso per i listener di eventi:

   

5. scegliere il listener di eventi che ti interessa Vi mostrerà il limite. funzione così come l'esatta riga di codice in quale script verrebbe eseguito. Questo dovrebbe dirti quale biblioteca sta facendo le tue cose pazze.

   

trovo il debugger Chrome di essere molto più potente e veloce (non lag) rispetto a Firebug e gli strumenti di sviluppo di IE. È altamente raccomandato :)