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

Question

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

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

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

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

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

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

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

<Ч>

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