tablas - Encuentra javascript que está cambiando el elemento DOM

obtener id de un elemento javascript

Question

¿Hay alguna técnica que pueda usar para encontrar qué javascript está alterando un elemento HTML? Tengo problemas para encontrar la forma en que un elemento en particular obtiene un estilo de display:none agregado en la carga. Sé que encontraré el script que hace esto eventualmente, pero quiero que ese proceso sea más fácil.

Mi solución ideal sería una forma de romper la ejecución de javascript tan pronto como se modifique un elemento DOM. Soy consciente de la capacidad de las herramientas de desarrollo de Chrome para hacer clic derecho en un elemento y seleccionar Romper en> Modificaciones de atributo. Sin embargo, esto sucede en algún momento durante la carga de la página, por lo que sería realmente agradable si pudiera insertar alguna secuencia de comandos antes de todas las demás declaraciones de guiones que digan ''observar un elemento con clase XYZ'' y romper la ejecución de JS en la modificación del elemento. Entonces, la ejecución de JS se rompería donde pueda ver el JS que modificó el elemento, o tal vez se podría encontrar mirando la pila de llamadas, pero de cualquier forma, podría ver el script que provocó la ruptura. He encontrado algunas respuestas que me dicen cómo hacerlo usando las herramientas de desarrollo de Chrome / Firebug, pero como dije, esta pregunta es sobre el enfoque programático.

Answer 1

Haga clic con el botón derecho en el elemento DOM> Interrumpir> Modificaciones de atributos

A través de # 3 en http://www.elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

Answer 2

Simplemente coloque el depurador en cualquier lugar dentro de su archivo y cuando ejecute el archivo, el código se detendrá en la línea exacta que colocó el depurador. Esto le permitirá usar la consola de desarrollador (digamos en Chrome) y acceder a diferentes variables y parte de su código más fácilmente.

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

Answer 3

puedes usar :-

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

Echa un vistazo a esto :-

Evento detectar cuando la propiedad css cambió usando Jquery