Cattura lo specifico codice javascript in esecuzione su Click

Question

Sto lavorando su un sito che ha un sacco di javascript legacy e jquery include e non c'è documentazione per mostrare cosa sta succedendo quando.

Ho un problema specifico da risolvere e non riesco a trovare il codice pertinente che viene eseguito quando si fa clic su un pulsante. Per salvarmi dal trascinare (e dare un senso a) centinaia di righe di script legacy, c'è una funzionalità, possibilmente in Firebug, che identificherà quale script viene eseguito quando faccio clic su un pulsante?

Grazie per il vostro aiuto.

Answer 1

Credo ci sia una funzionalità nella finestra della console di Firebug chiamata Profile. Fare clic su profilo, fare clic sul pulsante, quindi fare nuovamente clic su profilo. Dovrebbe darti quello che tutte le funzioni sono state chiamate in quel momento. Tieni presente che se questo codice include jQuery, potresti ottenere un lungo elenco di funzioni perché jQuery usa tonnellate nel suo codice. Sfortunatamente, il profiler mostrerà anche funzioni anonime, che possono davvero essere un problema.

Altrimenti, eseguire una ricerca nel codice per la classe o l'ID del pulsante e visualizzarli. Se si dispone di un ID di fancy, è possibile eseguire una ricerca di #fancy nel codice e tentare di trovarlo. Ciò potrebbe comportare in un generale direzione, almeno.

Answer 2

In Firebug è possibile impostare un punto di interruzione in alcuni JS e quindi si ottiene uno stack che consente di conoscere lo stack di chiamata della funzione corrente. Quindi, se si imposta il punto di interruzione nella funzione utilizzata da diversi gestori, è possibile utilizzarlo per scoprire esattamente in quale gestore si trova.

Questo probabilmente non funzionerà se si ha a che fare con callback AJAX e simili.

Answer 3

È possibile fare clic sul pulsante "Interrompi successivo" di Firebug (nella scheda Script, sembra un pulsante di pausa), quindi premere il pulsante che si desidera eseguire il debug.

La prossima volta che si esegue un codice JavaScript, Firebug si inserirà nel debugger e mostrerà quella riga di codice.

Answer 4

Il pulsante di interruzione non ha funzionato per me. Invece ho modificato l'attributo onclick con FireBug e lo ho anteposto con "debugger;" ... poi ti interromperò proprio lì quando clicchi :)

Answer 5

Nessuna delle risposte di cui sopra ha funzionato per me. Sto cercando di usare Firebug per capire come funziona una funzione su una pagina per un sito su cui non ho alcun controllo. Ecco cosa ha funzionato per me.

In primo luogo, ha ottenuto l'id dell'elemento che sto facendo clic sul dalla sorgente della pagina, e quindi ottenere un riferimento temporaneo per esso con la creazione di un orologio (nella scheda sceneggiatura):

tmp=document.getElementById("idOfElement")

Successivo , Ho assegnato il valore onclick corrente a un'altra variabile temporanea.

oldfunc=tmp.onclick

Successivamente, ho definito una nuova funzione onclick. Inizialmente ho provato a inserire debugger; come la prima cosa nella funzione, ma questo non funziona, ! Così, invece, ho creato un avviso:

tmp.onclick = function() { alert("Ok"); oldfunc() }

Ora, non appena clicco sul pulsante di allarme viene in su, a quel punto ho quindi fare clic sul "Break on next" pulsante, come indicato in un altro rispondi a questa domanda Quindi spengo l'avviso e immediatamente sono nel debugger nel posto giusto.

Nel mio caso, il pulsante "Break on next" non ha funzionato da solo, perché ci sono molti altri eventi, solo il mouse sulla pagina stava causando il punto di interruzione, impedendomi di fare sempre clic sul pulsante .