Znajdź javascript, który zmienia element DOM

Question

Czy są jakieś techniki, których mogę użyć, aby znaleźć to, co javascript zmienia element HTML? Mam problem ze znalezieniem sposobu, w jaki dany element otrzymuje styl inline z display:none dodanym przy ładowaniu. Wiem, że znajdę scenariusz, który w końcu to zrobi, ale chcę, żeby ten proces był łatwiejszy.

Moje idealne rozwiązanie byłoby sposobem na przerwanie wykonywania javascript, gdy tylko zostanie zmodyfikowany element DOM. Zdaję sobie sprawę, że narzędzia narzędziowe przeglądarki Chrome umożliwiają kliknięcie elementu prawym przyciskiem myszy i wybranie opcji Przerwij> Modyfikacje atrybutów. Dzieje się to jednak podczas ładowania strony, więc byłoby naprawdę fajnie, gdybym mógł wstawić jakiś skrypt przed wszystkimi innymi deklaracjami skryptu z napisem "uważaj na element z klasą XYZ" i przerwij wykonanie JS przy modyfikacji elementu. Następnie wykonanie JS albo się zepsułoby tam, gdzie widzę JS, który zmodyfikował element, albo może to można znaleźć patrząc na stos wywołań, ale tak czy inaczej, byłbym w stanie zobaczyć skrypt, który spowodował przerwę. Znalazłem kilka odpowiedzi, które mówią mi, jak to zrobić za pomocą narzędzi do Chrome Chrome/Firebug, ale jak powiedziałem, to pytanie dotyczy podejścia programowego.

Answer 1

prawym przyciskiem myszy na elemencie DOM> Przerwa na> Atrybuty Modyfikacje

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

Answer 2

Po prostu umieść debugger w dowolnym miejscu w pliku, a po uruchomieniu pliku kod zatrzyma się dokładnie w wierszu, w którym umieściłeś debugger. Umożliwi to korzystanie z konsoli programisty (powiedzmy w chrome) i łatwiejszy dostęp do różnych zmiennych i części kodu.

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

Answer 3

można użyć: -

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

Wystarczy popatrzeć na to: -

Event detect when css property changed using Jquery