如何找到改变< input ... />值属性的脚本标签

问题描述：

<form id="search" action="/search" method="get" autocomplete="off">
    <div>
        <input  type = "button" name = 'test_button" value = "test" />
    </div>
</form>

<script>
    document.getElementById("test_button").value = "changed_test"
</script>

正如上面的HTML代码所示，我定义了一个名称为 test_button 并且值 test 并使用脚本标记中的代码更改其值。

Just as the HTML code above shows, I have defined a button with name test_button and value test and changing it's value with the code in the script tag.

现在我正在调试一个使用Firebug的机制的大型网页， Firefox在Linux中。

Now I am debugging a large webpage which is using a mechanism like this using Firebug and Firefox in Linux.

我想知道如何找到脚本来改变值 code>< input ... /> ，但网页太大，各种< script> 自动执行的函数几乎不可能手动找到特定的脚本。

I want to know how I can find the script that changes the value attribute of the <input ... />, but the web page is too large, various <script> and anonymous functions which is auto-executed made it nearly impossible to find the specific script manually.

由于我在Linux ，我无法使用任何Microsoft工具搜索整个网页。我只有Firebug和Chrome。 Firebug能意识到吗？有没有人有一个好主意如何找到改变值？的特定< script>

Since I am in Linux, I cannot use any Microsoft tools to search the whole web page. I only have Firebug and Chrome. Can Firebug realize that? Does anyone have a good idea how to find the specific <script> that changed the value?

答

<script>
var node = document.getElementById("test_button");
Object.defineProperty(node, 'value', {
    set: function() { throw new Error('button value modified'); }
});
</script>

当任何试图修改按钮的值时， code>。

This will throw an error when anything tries to modify the button's value.

展开错误并单击显示的最后一行数字。这将直接引导您设置按钮的值。

Expand the error and click the last line number shown. This will take you straight to the line that set the value of the button.

下面是一个演示： http://jsfiddle.net/XSJZN/

在Chrome 17中测试。

Tested in Chrome 17.

如何找到改变< input ... />值属性的脚本标签

相关推荐