Trova javascript che sta modificando l'elemento DOM

Question

Esistono tecniche che posso utilizzare per trovare che javascript sta modificando un elemento HTML? Sto avendo qualche problema a scoprire come un particolare elemento sta ottenendo uno stile in linea di display:none aggiunto al caricamento. So che alla fine troverò la sceneggiatura, ma voglio che questo processo sia più facile.

La mia soluzione ideale sarebbe un modo di interrompere l'esecuzione di JavaScript non appena viene modificato un elemento DOM. Sono a conoscenza dell'abilità degli strumenti di sviluppo di Chrome di fare clic con il pulsante destro su un elemento e selezionare Interrompi> Modifica attributi. Tuttavia, ciò accade a volte durante il caricamento della pagina, quindi sarebbe davvero bello se potessi inserire qualche script prima di tutte le altre dichiarazioni di script che dicevano 'guarda un elemento con classe XYZ' e interrompere l'esecuzione di JS sulla modifica dell'elemento. Quindi, l'esecuzione di JS si interromperà dove posso vedere il JS che ha modificato l'elemento, o forse potrebbe essere trovato guardando lo stack di chiamate, ma in entrambi i casi, sarei in grado di vedere lo script che ha innescato l'interruzione. Ho trovato alcune risposte che mi dicono come farlo utilizzando gli strumenti di sviluppo di Chrome/Firebug, ma come ho detto, questa domanda riguarda l'approccio programmatico.

Answer 1

clic destro sul elemento DOM> Break on> Attributi Modifiche

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

Answer 2

Basta posizionare il debugger ovunque all'interno del file e quando si esegue il file, il codice si fermerà sulla riga esatta che è stato inserito nel debugger. Questo ti permetterà di usare la console per sviluppatori (diciamo in chrome) e accedere a variabili diverse e parte del tuo codice più semplice.

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

Answer 3

è possibile utilizzare: -

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

Date un'occhiata a questo: -

Event detect when css property changed using Jquery