web-dev-qa-db-fra.com

Trouver le javascript qui change l'élément DOM

Existe-t-il des techniques que je peux utiliser pour trouver quel javascript modifie un élément HTML? J'ai du mal à trouver comment un élément particulier obtient un style en ligne de display:none ajouté lors du chargement. Je sais que je trouverai le script qui le fera éventuellement, mais je veux que ce processus soit plus facile.

Ma solution idéale serait un moyen de rompre l'exécution de javascript dès qu'un élément DOM est modifié. Je suis conscient de la capacité des outils de développement de Chrome à cliquer avec le bouton droit sur un élément et à sélectionner Break On> Modifications d'attribut. Cependant, cela se produit pendant le chargement de la page, donc ce serait vraiment bien si je pouvais insérer un script avant toutes les autres déclarations de script qui dit `` surveiller un élément avec la classe XYZ '' et interrompre l'exécution de JS lors de la modification de l'élément. Ensuite, l'exécution de JS se briserait là où je peux voir le JS qui a modifié l'élément, ou peut-être que l'on pourrait le trouver en regardant la pile d'appels, mais de toute façon, je serais en mesure de voir le script qui a déclenché la rupture. J'ai trouvé quelques réponses qui me disent comment faire cela en utilisant Chrome dev tools/Firebug, mais comme je l'ai dit, cette question concerne l'approche programmatique.

javascripthtmldomdom-manipulation
48
p e p

Faites un clic droit sur l'élément DOM> Pause> Modifications des attributs

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

86
Nighto

vous pouvez utiliser :-

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

Jetez un oeil à ceci: -

Détection d'événement lorsque la propriété css a été modifiée à l'aide de Jquery

6
Alok