Jak znaleźć fragment kodu JavaScript, który modyfikuje element?

Question

Strona, którą próbuję sprawdzić, ma ukryty element <input type="hidden" name="Foo" value="123 /> na stronie, na której JavaScript/AJAX modyfikuje wartość. Próbuję dowiedzieć się, gdzie na ziemi w JavaScript jest kod, który od czasu do czasu modyfikuje tę wartość.

Czy istnieje narzędzie, które może mi pomóc znaleźć miejsca w JavaScript, które używają/zmodyfikować ten element? Czy Firebug zapewnia to, jeśli tak, w jaki sposób?

Uwaga: Jeśli próbowałeś szuka „foo” w kodzie, ale nie znaleziono żadnych tytułów ogłoszeń. Załadowano JSON i Mootools, + specyficzny dla aplikacji kod, co daje kilka tysięcy linii kodu. Element jest prawdopodobnie pośrednio dostępny.

Answer 1

Skąd wiesz, że JavaScript jest zmodyfikowanie tej wartości? Ponieważ wygląda na to, że już wiesz, kiedy jest wywoływana (ponieważ wiesz, że się zmienia), sugerowałbym punkt przerwania w Firebug w pierwszym zdarzeniu, które inicjuje zmiany (prawdopodobnie atrybut onclick w innym elemencie).

Trudno powiedzieć "ogólny" sposób, aby wiedzieć, gdzie w javascript zmienia wartość Foo, ponieważ istnieje wiele różnych podejść, różne biblioteki, każdy z jego składni.

Na przykład, jeśli próbowałeś wyszukać hasło "Foo" i go nie znalazłeś, skrypt może przechodzić przez DOM i zmieniać wartość wejścia jako "pierwsze dziecko czegoś". Próbowałbym wyszukać nazwy lub identyfikatory elementów rodzica wejściowego i zrozumieć kod z tego miejsca.

ja zwykle po prostu starać się zrozumieć logikę javascript z każdym skrypcie używam technik debugowania Firebug - ale tylko na skrypt, który korzysta z bibliotek.

Answer 2

Jeśli Firebug nie pozwala definiować punkty przerwania na ustawienie jakąś wartość, można wstawić coś takiego na stronie (tylko Firefox):

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

i albo przerwania na funkcję w Firebug lub użytkowania console.log lub cokolwiek, aby zrzucić stos do konsoli firebug.

Pamiętam gdzieś prezentację na temat planów Firebug, które obejmowały sekcję dotyczącą różnego rodzaju pułapki być obsługiwane, ale nie mogę znaleźć link do niego teraz.

---

[Edycja] Powyższe w przypadku, gdy wartość jest określana przez przypisanie wartości właściwości: .value = .... Jeśli chcesz złapać moment, gdy zmieniono atrybut (.setAttribute("value", ...)), możesz użyć detektorów mutacji DOM.

Answer 3

Firebug 1.5 będzie miał "Break-on-modyfikacja" na panelu HTML. Zobacz http://getfirebug.com/doc/breakpoints/demo.html#html - Przerwij zdarzenia mutacji DOM (HTML).