2009-08-10 13 views
21

De alguna manera en algún lugar de mi código, uno de los elementos en la página obtiene un atributo de estilo que no espero que obtenga. A saber, se obtiene style = "position: fixed". Puedo ver que esto sucede en la pestaña HTML de Firebug, pero no puedo encontrarlo en el código. La aplicación es bastante grande y no puedo simplemente buscar todo el código para encontrar el lugar, además, se están utilizando varias bibliotecas de terceros (jQuery es una de ellas).Depuración del cambio de atributo DOM

Entonces, mi pregunta es, ¿es posible ver de alguna manera este estilo siendo modificado y obtener el rastro?

Respuesta

10

Bueno, después de un par de horas de googlear y experimentando, parece que el mejor puede hacerlo configurar un controlador de MutationEvent (Firefox compatible con ellas) así:

var node_modified = function(evt) { 
    if(evt.attrName == 'style') { 
     alert('Style is changing from ' + evt.prevValue + ' to ' + evt.newValue); 
    } 
} 
var test_close = document.getElementById('test_close'); 
test_close.addEventListener('DOMAttrModified', node_modified, false); 

Un establece entonces algún tipo de registro a lo largo de su código y vea cuándo se desencadena este evento. Desafortunadamente, no puede simplemente configurar un punto de interrupción en el controlador de eventos de mutación y ver el seguimiento de la pila, porque el seguimiento de pila del controlador de eventos no tiene información sobre el lugar en el código, donde se desencadenó el evento. Algo lógico, pero creo que con algunos piratería esta característica se puede implementar en Firebug.

¡Gracias por su tiempo!

0

Parece que realmente necesita un depurador. Firebug has one built in, de lo contrario puede probar Venkman, lo cual me parece un poco más engorroso, pero tal vez sea más efectivo.

¡Buena suerte! :)

+1

Bueno, yo uso Firebug, pero no puedo encontrar una manera de establecer el punto de ruptura en el lugar donde se cambia el atributo, porque no sé dónde está y encontrar que es exactamente lo que quiero aquí ... –

19

En Google Chrome, haga clic con el botón derecho en un elemento de la página y seleccione "Inspeccionar elemento". La ventana o el panel Herramientas del desarrollador se abrirá con ese elemento seleccionado en la vista de origen. A continuación, puede hacer clic con el botón derecho en la etiqueta seleccionada y seleccionar "Interrupción de las modificaciones de los atributos".

+0

No funciona en la recarga de la página ni cuando se cambian las vistas en Angular. – Sammi

2

En el inspector html de Firebug puede hacer clic derecho en un nodo y hay una opción para interrumpir el cambio de atributo.

Los puntos de interrupción persisten durante las recargas de página y también puede explorar la pila de llamadas.

Cuestiones relacionadas