1. casa
  2. Domanda e risposta
  3. Debug degli eventi JavaScript con Firebug

Debug degli eventi JavaScript con Firebug

2009-04-05 6 views
22

Ho bisogno di impostare un breakpoint su determinati eventi, ma non so, dove è definito, perché ho un mucchio enorme di codice JavaScript minimizzato, quindi non riesco a trovarlo manualmente .Debug degli eventi JavaScript con Firebug

È possibile impostare in qualche modo un punto di interruzione, ad esempio l'evento click di un elemento con ID registerButton o trovare da qualche parte quale funzione è associata a quell'evento?

ho trovato l'add-on Firefox Javascript Deobfuscator, che mostra attualmente eseguito JavaScript, che è bello, ma il codice ho bisogno di eseguire il debug sta usando jQuery, quindi c'è un sacco di chiamate di funzione anche sull'evento più semplice , quindi non posso nemmeno usarlo.

Esiste un debugger creato appositamente per jQuery?

Qualcuno sa qualche strumento che trasforma minified JavaScript di nuovo in codice formattato come sua volta function(){alert("aaa");v=3;} indietro nel

function() { 
    alert("aaa"); 
    v = 3; 
}

fonte

2009-04-05 Jakub Arnold

+1

possibile duplicato di [Come eseguire il debug di associazioni di eventi JavaScript/jQuery con Firebug (o strumento simile)] (http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings- with-firebug-or-similar-tool) –

risposta

16

Beh, potrebbe tutto essere troppo disturbo che ne vale la pena, ma sembra che si deve fare tre cose:

  1. De-minify la fonte. Mi piace this online tool per un veloce e sporco. Basta incollare il codice e fare clic sul pulsante. Non mi ha mai deluso, anche sul più funky di JavaScript.

  2. jQuery Tutti leganti eventi instradato "jQuery.event.add" (here's what it looks like in the unbuilt source), quindi è necessario trovare quel metodo e impostare un punto di interruzione lì.

  3. Se si è arrivati ​​a questo punto, tutto ciò che è necessario fare è ispezionare il callstack al punto di interruzione per vedere chi ha chiamato cosa. Nota che dal momento che ti trovi in ​​un punto interno della libreria dovrai controllare alcuni salti (dal momento che il codice che chiama "jQuery.event.add" era probabilmente solo altre funzioni di jQuery).

Nota che 3) richiede Firebug per FF3. Se siete come me e preferisce eseguire il debug con Firebug per FF2, è possibile utilizzare il metodo secolare arguments.callee.caller.toString() per ispezionare lo stack di chiamate, inserendo come molti ".caller "s come necessario

Edit:. Inoltre, vedi "How to debug Javascript/jQuery event bindings with FireBug (or similar tool)".

Si può essere in grado di farla franca:

// inspect  
var clickEvents = jQuery.data($('#foo').get(0), "events").click; 
jQuery.each(clickEvents, function(key, value) { 
    alert(value) // alerts function body 
})

È possibile che questo trucco vi permetterà di vedere il codice di gestione evento, e si può solo iniziare la caccia giù in tua fonte, in contrapposizione per provare a impostare il punto di interruzione nella fonte di jQuery.

fonte

2009-04-05 13:22:25

0

È possibile utilizzare il comando debugger ovunque in un file javascript. Quando l'interprete preme quella frase, se è disponibile un debugger (come Firebug), viene attivato

fonte

2009-04-05 11:37:57 Gareth

+1

Il problema è che non so dove nel codice è definito l'evento. Ho bisogno del debugger per dirmi che, ad esempio mostrando la funzione che è vincolata, o impostando un breakpoint all'evento senza bisogno di sapere, dove si trova nel codice. –

4

Sostituisci prima jquery minisito o qualsiasi altra fonte che usi con formattato. Un altro trucco utile che ho trovato sta usando il profiler in firebug. Il profiler mostra quali funzioni sono in esecuzione e puoi cliccare su una e andare lì per impostare un punto di interruzione.

fonte

2009-04-05 11:43:29

+0

Sì, ma profiler non è molto comodo se usato con jQuery. –

+0

Quindi utilizzare la versione non minificata. Qual è il problema? –

+3

Il problema è che non ho una versione non minificata di tutte le fonti. –

0

trovare la linea e inserire un punto di interruzione. Quindi ricaricare il sito/pagina. Quindi firebug interrompe automaticamente l'esecuzione dell'istruzione quando viene colpito un punto di interruzione.

fonte

2009-04-05 11:56:38

1

Quello che potresti fare è ottenere il codice miniato - avrai accesso a questo. De-minify il codice secondo l'opzione di Crescent Fresh (1) o qualsiasi altro metodo tu preferisca.

Quindi, scarica e installa Fiddler: tutti gli sviluppatori Web devono avere installato questo incredibile strumento.

Quindi utilizzando Fiddler è possibile intercettare la chiamata del browser per il file minified.js con il file unminified.js locale presente sull'unità locale.

Fiddler fondamentalmente intercetta la richiesta del browser per un file specifico e può servire un file diverso per il browser. Quindi ora puoi guardare il codice non minorato.

Facile.

Un'altra opzione è utilizzare Firefox e installare il debugger Venkman su di esso - molto meglio di Firebug IMHO - e il debugger di Venkman ha un'opzione "carina" che può visualizzare visivamente il codice minificato in fase di esecuzione. Stick il punto di rottura dove vuoi ora ...

fonte

2011-06-14 11:36:08

3

Solo un aggiornamento:

Google Chrome (i strumenti dev in esso) supportano tutti i tipi di punti di interruzione, insieme a pausa sul Event.

Tutti eventi insieme dispositivo di orientamento cambiamenti e timer

Si può vedere a video con una presentazione di tutte le funzionalità di Google IO .

C'è anche built-in deminifier/unminimizer/prettifier che vi aiuterà a impostare punti di interruzione manualmente su file javascript compressi.

fonte

2011-07-31 11:20:51 antitoxic

 Problemi correlati

  • Nessun problema correlato^_^