DOM Attribut Änderung Debugging

Question

Irgendwo irgendwo in meinem Code eines der Elemente auf der Seite bekommt ein Stil-Attribut, das ich nicht erwarte es zu bekommen. Es wird nämlich style = "position: fixed". Ich kann sehen, dass dies in der Registerkarte HTML in Firebug passiert, aber ich kann es nicht im Code finden. Die Anwendung ist ziemlich groß und ich kann nicht einfach den ganzen Code durchsehen, um den Platz zu finden, außerdem werden mehrere Drittanbieter-Bibliotheken verwendet (jQuery ist eine davon).

Also, meine Frage ist, ist es möglich, irgendwie diesen Stil zu bekommen, der geändert wird, und die Spur zu bekommen?

Answer 1

Nun, nach ein paar Stunden googeln und experimentieren, so scheint es, dass das beste Setup es tun können, einen MutationEvent Handler (Firefox sie unterstützt) wie folgt aus:

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); 

Ein dann einrichten eine Art von Protokollierung in Ihrem Code und sehen, wann dieses Ereignis ausgelöst wird. Leider können Sie im Mutationsereignishandler nicht einfach einen Haltepunkt einrichten und die Stacktrace anzeigen, da die Stacktrace des Ereignishandlers keine Informationen über die Stelle im Code enthält, an der das Ereignis ausgelöst wurde. Irgendwie logisch, aber ich denke, dass mit etwas Hacking diese Funktion in Firebug implementiert werden kann.

Vielen Dank für Ihre Zeit!

Answer 2

Klingt, als ob Sie wirklich einen Debugger benötigen. Firebug has one built in, sonst kann man Venkman einen Versuch geben, was ich etwas umständlicher finde aber vielleicht effektiver ist ..

Viel Glück! :)

Answer 3

Klicken Sie in Google Chrome mit der rechten Maustaste auf ein Element auf der Seite und wählen Sie "Element prüfen". Das Developer Tools-Fenster oder Fenster wird mit dem in der Quellansicht ausgewählten Element geöffnet. Sie können dann mit der rechten Maustaste auf das ausgewählte Tag klicken und "Änderungen an Attributen ändern" auswählen.

Answer 4

Im HTML-Inspektor von Firebug können Sie mit der rechten Maustaste auf einen Knoten klicken und es gibt eine Option, bei Attributänderungen zu unterbrechen.

Breakpoints bleiben beim erneuten Laden der Seite erhalten, und Sie können auch den Call Stack durchsuchen.