¿Cómo encontrar el fragmento de JavaScript que modifica un elemento?

Question

La página que intento inspeccionar tiene un elemento <input type="hidden" name="Foo" value="123 /> oculto en una página, donde Javascript/AJAX modifica el valor. Estoy tratando de encontrar dónde en la tierra en Javascript es el código que modifica este valor de vez en cuando.

¿Existe alguna herramienta que pueda ayudarme a encontrar los lugares en javascript que usan/modifican ese elemento? Firebug lo proporciona, de ser así, ¿cómo?

Nota: Si ha intentado buscar "Foo" en el código, pero no he encontrado ningún título que coincida. Hay JSON y Mootools cargados, + código específico de la aplicación, que da como resultado varias miles de líneas de código. El elemento es probablemente accedido indirectamente.

Answer 1

¿Cómo sabes que el javascript está modificando este valor? Como parece que ya sabes cuándo se llama (dado que sabes que cambia), sugeriría un punto de interrupción en Firebug en el primer evento que inicie el cambio (probablemente un atributo onclick en otro elemento).

Es un poco difícil decirles una forma "genérica" ​​de saber en qué lugar de JavaScript está cambiando el valor de Foo, ya que hay muchos enfoques diferentes, bibliotecas diferentes, cada una con su sintaxis.

Por ejemplo, si intentó buscar "Foo" y no lo encontró, la secuencia de comandos puede estar atravesando el DOM y cambiando el valor de la entrada como "primer hijo de algo". Intentaría buscar nombres o identificadores de los elementos principales de entrada y entender el código desde allí.

Normalmente trato de entender la lógica de JavaScript de cada script que uso con las técnicas de depuración de Firebug, pero solo en el script que usa las bibliotecas.

Answer 2

Si Firebug no le permite definir puntos de interrupción en el establecimiento de un cierto valor, podría insertar algo como esto en la página (Firefox solamente):

$("textarea")[0].__defineSetter__("value", function(val) { 
    alert("called"); 
}) 

Y, o bien punto de interrupción en la función o uso de Firebug console.log o lo que sea para volcar la pila a la consola Firebug.

Recuerdo haber visto en alguna parte una presentación sobre planes de Firebug, que incluía una sección sobre varios tipos de puntos de interrupción para ser admitidos, pero no puedo encontrar un enlace a ella ahora mismo.

---

[editar] Lo anterior es para el caso de que el valor se establece mediante la asignación a la propiedad value: .value = .... Si necesita detectar el momento en que se cambia un atributo (), puede usar detectores de mutación DOM.

Answer 3

Firebug 1.5 tendrá "Break-on-Modify" en el panel HTML. Ver http://getfirebug.com/doc/breakpoints/demo.html#html - Romper los eventos de mutación DOM (HTML).