2009-08-10 23 views
21

In qualche modo nel mio codice, uno degli elementi nella pagina ottiene un attributo di stile che non mi aspetto che ottenga. Vale a dire, style = "position: fixed". Posso vedere questo accada nella scheda HTML in Firebug, ma non riesco a trovarlo nel codice. L'applicazione è abbastanza grande e non posso semplicemente guardare tutto il codice per trovare il posto, inoltre, vengono utilizzate diverse librerie di terze parti (jQuery è una di queste).DOM debugging modifica degli attributi

Quindi, la mia domanda è, è possibile in qualche modo catturare questo stile che viene modificato e ottenere la traccia?

risposta

10

Ebbene, dopo un paio di ore di googling e sperimentazione, sembra che la migliore messa a punto può farlo un gestore MutationEvent (Firefox li sostiene) in questo modo:

var node_modified = function(evt) { 
    if(evt.attrName == 'style') { 
     alert('Style is changing from ' + evt.prevValue + ' to ' + evt.newValue); 
    } 
} 
var test_close = document.getElementById('test_close'); 
test_close.addEventListener('DOMAttrModified', node_modified, false); 

Un quindi impostare una sorta di registrazione in tutto il codice e vedere quando questo evento viene attivato. Sfortunatamente, non puoi semplicemente impostare un breakpoint nel gestore di eventi di mutazione e vedere la traccia dello stack, perché la traccia dello stack del gestore di eventi non ha informazioni sulla posizione nel codice, dove l'evento è stato attivato. Un po 'logico, ma penso che con qualche hacking questa funzionalità possa essere implementata in Firebug.

Grazie per il vostro tempo!

0

Sembra che tu abbia davvero bisogno di un debugger. Firebug has one built in, altrimenti puoi provare a provare Venkman, che trovo un po 'più ingombrante ma forse è più efficace ..

Buona fortuna! :)

+1

Bene, io uso Firebug, ma non riesco a trovare un modo per impostare break-point nel punto in cui l'attributo viene modificato, perché non so dove sia e trovarlo è esattamente quello che voglio qui .. –

19

In Google Chrome, fare clic con il tasto destro del mouse su un elemento nella pagina e selezionare "Ispeziona elemento". La finestra o il riquadro Strumenti di sviluppo si aprirà con quell'elemento selezionato nella vista sorgente. Puoi quindi fare clic con il pulsante destro del mouse sul tag selezionato e scegliere "Interrompi modifiche di attributi".

+0

Non funziona alla ricarica della pagina o quando si cambiano le viste in Angolare. – Sammi

2

Nell'ispettore html di Firebug è possibile fare clic con il tasto destro del mouse su un nodo e c'è un'opzione per interrompere il cambio di attributo.

I punti di interruzione persistono attraverso i ricaricamenti della pagina e si può anche sfogliare lo stack di chiamate.

Problemi correlati