Finden Sie Javascript, das DOM-Element ändert

Question

Gibt es irgendwelche Techniken, die ich verwenden kann, um zu finden, was Javascript ein HTML-Element ändert? Ich habe Probleme, herauszufinden, wie ein bestimmtes Element einen Inline-Stil von display:none erhält, der beim Laden hinzugefügt wird. Ich weiß, dass ich das Skript finden werde, das dies letztendlich tut, aber ich möchte, dass dieser Prozess einfacher wird.

Meine ideale Lösung wäre eine Möglichkeit, die JavaScript-Ausführung zu unterbrechen, sobald ein DOM-Element geändert wird. Mir ist bewusst, dass die Dev-Tools von Chrome die Möglichkeit haben, mit der rechten Maustaste auf ein Element zu klicken und "Einbruch"> "Attributänderungen" auszuwählen. Dies geschieht jedoch manchmal während des Ladens der Seite, daher wäre es wirklich nett, wenn ich ein Skript vor allen anderen Skriptdeklarationen einfügen könnte, die nach einem Element mit der Klasse XYZ suchen und die JS-Ausführung bei der Elementänderung unterbrechen. Dann bricht die JS-Ausführung entweder ab, wo ich den JS sehen kann, der das Element modifiziert hat, oder vielleicht, dass ich den Call-Stack betrachte, aber so oder so, würde ich das Skript sehen, das den Break ausgelöst hat. Ich habe einige Antworten gefunden, die mir sagen, wie man das mit Chrome-Dev-Tools/Firebug macht, aber wie ich schon sagte, geht es bei dieser Frage um den programmatischen Ansatz.

Answer 1

Rechtsklick auf DOM-Element> Break auf> Attribute Änderungen

Via # 3 in http://www.elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

Answer 2

Platzieren Sie den Debugger einfach an einer beliebigen Stelle in der Datei, und wenn Sie die Datei ausführen, wird der Code in der exakten Zeile angehalten, in der Sie den Debugger platziert haben. Dadurch können Sie die Entwicklerkonsole verwenden (sagen wir in Chrome) und auf verschiedene Variablen und einen Teil Ihres Codes zugreifen.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

Answer 3

Sie verwenden können: -

document.documentElement.addEventListener('DOMAttrModified', function(e){ 
    if (e.attrName === 'style') { 
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue); 
    } 
}, false); 

Werfen Sie einen Blick auf diese: -

Event detect when css property changed using Jquery