Question

我正在尝试检查的页面在页面上有一个隐藏的<input type="hidden" name="Foo" value="123 />元素，其中Javascript / AJAX修改了该值。我试图在Javascript中查找地球上不时修改此值的代码。

是否有工具可以帮助我找到使用/修改该元素的javascript中的位置？如果是的话，Firebug会提供这个吗？

注意：如果尝试在代码中查找“Foo”，但我没有找到任何匹配的标题。加载了JSON和Mootools，+特定于应用程序的代码，这会产生数千行代码。该元素可能是间接访问的。

Answer 1

Firebug 1.5将在HTML面板上显示“Break-on-Modify”。请参阅http://getfirebug.com/doc/breakpoints/demo.html#html - 中断DOM（HTML）突变事件。

Answer 2

你怎么知道javascript正在修改这个值？因为它看起来你已经知道什么时候被调用（因为你知道它发生了变化），我会在第一个启动变化的事件中建议Firebug中的断点（可能是其他元素中的onclick属性）。

很难告诉你一种“通用”的方式来了解javascript中哪些地方正在改变Foo的价值，因为有很多不同的方法，不同的库，每个都有它的语法。

例如，如果您尝试搜索“Foo”但未找到它，则脚本可能会遍历DOM并将输入值更改为“某事物的第一个孩子”。我会尝试搜索输入的父元素的名称或ID，并从那里理解代码。

我通常只是尝试从Firebug的调试技术中使用的每个脚本中理解javascript逻辑 - 但只是在使用库的脚本上。

Answer 3

如果Firebug不允许您在设置某个值时定义断点，则可以在页面中插入类似的内容（仅限Firefox）：

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

在Firebug中使用函数断点或使用console.log或其他任何方法将堆栈转储到firebug控制台。

我记得在某个地方看过Firebug计划的演示文稿，其中包含了一个关于支持的各种断点的部分，但我现在找不到它的链接。

[edit]以上是针对通过赋值属性.value = ...来设置值的情况。如果您需要捕捉属性更改的时刻（.setAttribute("value", ...)），您可以使用DOM突变侦听器。