¿Puedo romper con el depurador en todos los cambios a un elemento DOM?

Question

Me encantaría poder ver el código que afecta a un elemento DOM específico.

Pero también me encantaría no tener que revisar todas mis búsquedas en javascript para las referencias/selectores que podrían estar causando el problema.

¿Alguien tiene una técnica para hacer que un depurador de navegador rompa cualquier cambio en un elemento DOM específico? No me importa que requiera un navegador o extensión específica para funcionar.

Answer 1

Esto también es factible sin necesidad de escribir cualquier secuencia de comandos en Firebug, así como en las herramientas para desarrolladores de Chrome (tal vez otros, no inspeccionaron más).

En Firebug:

1. Ir a la ficha HTML
2. Haga clic derecho en un elemento desea monitorizar
3. elegir la opción "Interrumpir en atribuir el cambio", o "Break On adición o eliminación de Niños ", o "Break On Elemento de Extracción"

en Chrome Developer Tools

1. Ir a la pestaña Elementos
2. Haga clic derecho en un elemento desea monitorizar
"Rotura encendido ..."
3. Seleccionar, a continuación, elegir la opción "Modificación de subárbol", o "Atributos Modificación" o "extirpación de ganglios"

De hecho, descubrí esto después de intentar con la respuesta aceptada de 999, sin embargo, el código dado no funcionó para mí. Además, la posibilidad de Chrome de monitorear eventos en cualquier subárbol DOM parece realmente agradable.

Answer 2

Nota: Los siguientes eventos fueron excelentes cuando se hizo la pregunta, pero ya no son actuales. La alternativa recomendada es MutationObservers, pero los que todavía están madurando

MutationObserver on MDN

---

probar este (en Firefox, con Firebug instalado):

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