Czy mogę zerwać z debugerem na wszystkie zmiany w elemencie DOM?

Question

Naprawdę chciałbym móc zobaczyć kod, który wpływa na konkretny element DOM.

Ale ja również bardzo chciałbym nie przeglądać wszystkich moich javascriptów w poszukiwaniu referencji/selektorów, które mogą być przyczyną problemu.

Czy ktoś ma technikę powodującą, że debuger przeglądarki łamie wszelkie zmiany w konkretnym elemencie DOM Nie przeszkadza mi to, że wymaga pracy określonej przeglądarki lub rozszerzenia.

Answer 1

Jest to również wykonalne bez konieczności pisania skryptu w Firebug, a także w narzędziach programistycznych Chrome (może inni nie sprawdzali dalej).

w Firebug:

1. Przejdź do zakładki HTML
2. prawym przyciskiem myszy element, który chcesz monitorować
3. Wybierz "Break On Attribute Change", czy „Break On Child dodanie lub usunięcie ”czy "break On Element Removal"

w Chrome Developer Tools

1. Przejdź do zakładki Elements
2. prawym przyciskiem myszy element, który chcesz monitorować
3. Wybierz „Break On ...”, następnie wybierz „Subtree Modyfikacja” lub „Atrybuty modyfikacja” lub „Usuwanie węzła”

Rzeczywiście znalazłem to po wypróbowaniu zaakceptowanej odpowiedzi 999, jednak podany kod nie zadziałał dla mnie. Dodatkowo, możliwość Chrome monitorowania zdarzeń w każdym poddrzewie DOM wydaje się naprawdę przyjemna.

Answer 2

Uwaga: poniższe wydarzenia były świetne, gdy zadano pytanie, ale nie są już aktualne. Zalecanym rozwiązaniem jest MutationObservers, ale te są nadal dojrzewania

MutationObserver on MDN

---

Spróbuj tego (Firefox, ze Firebug zainstalowany):

function breakOnChange(el) { 

    if (!el.addEventListener) return; 

    el.addEventListener('DOMAttrModified', 
     function(DOMAttrModifiedEvent){debugger}, true); 

    el.addEventListener('DOMNodeInserted', 
     function(DOMNodeInsertedEvent){debugger}, true); 

    el.addEventListener('DOMNodeRemoved', 
     function(DOMNodeRemovedEvent){debugger}, true); 

} 

// Usage: 
breakOnChange(someDomNode);