Ich breche mit debugger auf alle änderungen, die ein DOM-element?

Ich würde wirklich gerne in der Lage sein, um zu sehen, den code, die ein bestimmtes DOM-element.

Aber ich habe auch wirklich lieben würde, nicht zu haben, sich durch alle meine javascript-Suche für Verweise/Selektoren, die möglicherweise das Problem verursacht.

Kennt jemand eine Technik, die für die Entstehung von browser-debugger auf alle änderungen, um ein bestimmtes DOM-element? Ich habe nichts dagegen erfordern einen bestimmten browser oder einer Erweiterung zu arbeiten.

  • Bitte ändern Sie die akzeptierte Antwort. Die Ereignisse in der akzeptierten Antworten sind ein bisschen veraltet jetzt. @thegeko Antwort ist besser.
InformationsquelleAutor Adam A | 2010-06-10
  1. 32

    Dies ist auch machbar ohne das schreiben von Skripts in Firebug sowie im Chrome die developer tools (vielleicht auch anderen, nicht weiter untersuchen).

    In Firebug:

    1. Gehen Sie zur Registerkarte "HTML"
    2. Der rechten Maustaste auf ein element, das Sie überwachen möchten
    3. Wählen Sie "Pause On" - Attribut Ändern", oder "Break On Child hinzufügen Oder Entfernen" oder "Break On Element Entfernen"

    In Chrome Developer Tools

    1. Gehen Sie zur Registerkarte Elemente
    2. Der rechten Maustaste auf ein element, das Sie überwachen möchten
    3. Wählen Sie "Break On ...", dann die Option "Unterstruktur Ändern" oder "Eigenschaften Ändern", oder "Knoten Entfernen"

    Ich fand dies heraus, nach dem Versuch akzeptiert Antwort von 999, jedoch nicht gegeben-code hat nicht funktioniert für mich. Darüber hinaus Chrome die Möglichkeit zu überwachen Ereignisse auf DOM-Teilbaum scheint wirklich nett.

    InformationsquelleAutor thegeko
  2. 10

    Hinweis: Die Veranstaltungen waren groß, als die Frage gestellt wurde, aber sind nicht mehr aktuell. Die empfohlene alternative ist MutationObservers, aber das sind immer noch die Reifung

    MutationObserver auf MDN

    Versuchen, diese (im Firefox, mit Firebug installiert):

    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);
    • Dies ist ziemlich genial und bekommt von mir die meisten der Weg dorthin. Es lässt mich nicht den code finden, Tat sich die ändern, aber. Ich glaube nicht, dass es etwas Weg zu ziehen, die bisherigen call stack aus, ist es?
    • Klicken Sie auf den "stack" - Reiter -- die Funktionen zum ändern des DOM-element sollte zu finden sein.
    • Oh wow, du hast Recht! Ich weiß nicht, wie ich es verpasst das erste mal. Dank einer Tonne!!!
    • Netter trick! Super nützlich, hilft mir eine debug-Ausgabe auf 1000+ Zeilen von minified JS. Danke!
    InformationsquelleAutor James
Schreibe einen Kommentar