Как найти фрагмент JavaScript, который модифицирует элемент?

Question

На странице, которую я пытаюсь проверить, есть скрытый элемент <input type="hidden" name="Foo" value="123 /> на странице, где Javascript / AJAX изменяет значение. Я пытаюсь найти где на земле в Javascript код, который время от времени изменяет это значение.

Есть ли инструмент, который может помочь мне найти места в javascript, которые используют / модифицируют этот элемент? Firebug обеспечивает это, если да, то как?

Примечание. Если вы попытались найти "Foo" в коде, но я не нашел подходящих названий. Там загружены JSON и Mootools + специальный код приложения, который выдает несколько тысяч строк кода. Элемент, вероятно, доступен косвенно.

Answer 1

Firebug 1.5 будет иметь «Break-on-Modify» на панели HTML. См. http://getfirebug.com/doc/breakpoints/demo.html#html - События мутации DOM (HTML).

Answer 2

Откуда вы знаете, что javascript изменяет это значение? Поскольку, похоже, вы уже знаете, когда он вызывается (поскольку вы знаете, что он меняется), я бы предложил точку останова в Firebug в первом событии, которое инициирует изменение (вероятно, атрибут onclick в другом элементе).

Трудно сказать вам "общий" способ узнать, где в javascript он меняет значение Foo, поскольку существует множество разных подходов, разных библиотек, каждая со своим синтаксисом.

Например, если вы попытались найти «Foo» и не нашли его, сценарий может обходить DOM и изменять значение ввода как «первый потомок чего-либо». Я бы попытался найти имена или идентификаторы родительских элементов ввода и понять оттуда код.

Обычно я просто пытаюсь понять логику javascript из каждого сценария, который я использую с методами отладки Firebug, - но только из сценария, который использует библиотеки.

Answer 3

Если Firebug не позволяет вам определять точки останова при установке какого-либо значения, вы можете вставить что-то вроде этого на странице (только для Firefox):

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

И либо остановите функцию в Firebug, либо используйте console.log, либо что-нибудь еще, чтобы выгрузить стек в консоль Firebug.

Я помню, как где-то видел презентацию о планах Firebug, которая включала раздел о различных типах точек останова, которые нужно поддерживать, но я не могу найти ссылку на него сейчас.

---

[править] Выше приведено для случая, когда значение устанавливается путем присвоения свойству value: .value = .... Если вам нужно уловить момент, когда атрибут изменяется (.setAttribute("value", ...)), вы можете использовать прослушиватели мутации DOM.