如何找到修改元素的JavaScript代码片段？

我试图检查的页面在页面上有一个隐藏的<input type="hidden" name="Foo" value="123 />元素，其中Javascript/AJAX修改值。我试图找到JavaScript中的地方是不时修改此值的代码。如何找到修改元素的JavaScript代码片段？

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

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

来源

2009-10-26 AmericanDad

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

这是一种很难告诉你一种“通用”的方式来知道JavaScript在哪里改变Foo的价值，因为有很多不同的方法，不同的库，每一个都有它的语法。

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

我通常只是试着理解来自我使用Firebug的调试技术的每个脚本的JavaScript逻辑 - 但只是使用这些库的脚本。

来源

2009-10-26 02:28:44 GmonC

+1为通用方式'grep'的候选人进行更改。如其他答案中所述，希望应该有更好的方法来设置断点。 – GuruM 2012-09-23 08:00:51

如果萤火虫不会让你定义上设置一些价值断点，你可以插入这样的事情在页面（火狐只）：

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

，要么在Firebug或使用该函数断点console.log或任何将堆栈转储到萤火虫控制台。

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

[编辑]以上是值是通过分配给值属性设置的情况下：.value = ...。如果您需要赶上属性发生更改（.setAttribute("value", ...)），您可以使用DOM变异监听器。

来源

2009-10-27 08:58:30 Nickolay

+1信息。你能分享__how__上的信息来使用DOM变异监听器吗？也许有一两个链接？谢谢。 – GuruM 2012-09-23 08:04:02

@GuruM：将addEventListener与事件名称DOMAttrModified一起使用，请参阅https://developer.mozilla.org/en-US/docs/DOM/Mutation_events。请注意，突变监听器正在被逐渐淘汰，以支持不同的机制，即突变观察者（也在该MDN页面上提到） – Nickolay 2012-09-23 11:44:54

+1 @Nickolay。感谢您的链接。 – GuruM 2012-09-24 08:49:32

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

来源

2009-10-28 19:36:46 robcee

+1。确实存在设置断点的修改功能。但是，当我尝试设置这样一个断点时，它不起作用，即它没有在代码中断，使得更改说按钮标题/状态得到改变。所以不知道除了设置断点之外还需要做什么。 – GuruM 2012-09-23 08:02:43

如何找到修改元素的JavaScript代码片段？

回答

相关问题