Find script that changed the value attribute of a <input /> tag

Question

<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>

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

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

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 are auto-executed made it nearly impossible to find the specific script manually.

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 of how to find the specific <script> that changed the value?

Answer 1

Add some code like this to the document, right after the form with the button:

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

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.

Here's a demo: http://jsfiddle.net/XSJZN/

Tested in Chrome 17.