javascript - 如何找到修改元素的 JavaScript 片段？

Question

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

有没有一种工具可以帮助我在 javascript 中找到使用/修改该元素的位置？Firebug 是否提供此功能，如果提供，如何提供？

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

score 8 · Accepted Answer

Firebug 1.5 将在 HTML 面板上显示“Break-on-Modify”。请参阅http://getfirebug.com/doc/breakpoints/demo.html#html - Break on DOM (HTML) Mutation Events。

score 1 · Accepted Answer

你怎么知道 javascript 正在修改这个值？由于它看起来您已经知道它何时被调用（因为您知道它会更改），所以我建议在 Firebug 中的第一个事件中设置一个断点来启动更改（可能是其他元素中的 onclick 属性）。

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

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

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

score 0 · Accepted Answer

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

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

并且在 Firebug 中的函数上设置断点，或者使用console.log或将堆栈转储到 Firebug 控制台。

我记得在某处看到过有关 Firebug 计划的演示文稿，其中包括有关要支持的各种断点的部分，但我现在找不到指向它的链接。

[编辑] 以上是通过分配给 value 属性来设置值的情况：.value = ...。如果您需要捕获属性更改的时刻 ( .setAttribute("value", ...))，您可以使用 DOM 突变侦听器。

3 回答 3