查找更改 <input /> 标记的 value 属性的脚本答案

【问题标题】：Find script that changed the value attribute of a <input /> tag查找更改 <input /> 标记的 value 属性的脚本
【发布时间】：2020-06-18 08:26:56
【问题描述】：

<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 的按钮，并使用脚本标记中的代码更改其值。

现在我正在调试一个大型网页，该网页正在使用类似这样的机制，在 Linux 中使用 Firebug 和 Firefox。

我想知道如何找到更改<input ... /> 的value 属性的脚本，但是网页太大，各种<script> 和自动执行的匿名函数几乎不可能手动查找特定的script。

由于我在 Linux 中，我无法使用任何 Microsoft 工具来搜索整个网页。我只有 Firebug 和 Chrome。 Firebug 能意识到这一点吗？有谁知道如何找到更改了value 的特定<script>？

【问题讨论】：

这不太清楚，您似乎发布了更改按钮值的脚本；除此之外，使用浏览器的“查找”功能循环遍历字符串“test_button”的实例以查看它的使用位置。
@Mr.Disappointment 我认为代码只是代表核心问题的一个示例，实际被调试的文档要大得多（并且可能到处都有“test_button”的等价物） .

标签： javascript html firebug

【解决方案1】：

在文档中添加一些这样的代码，就在带有按钮的表单之后：

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

当有任何东西试图修改按钮的value 时，这将引发错误。

展开错误并单击最后显示的行号。这会将您直接带到设置按钮值的行。

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

在 Chrome 17 中测试。

【讨论】：

非常感谢。你写的真的很详细。这确实是个好主意。但我需要调试一个不是我写的网站，因为我需要在那个网站上写一个网络爬虫。我记得chrome开发者工具有这样的功能。例如对于该行：<input type = "button" id = “btn” value = "test_button">，我可以右键单击该行，然后选择“属性修改时中断”，然后刷新网页，chrome会在属性被修改的tge行停止，dosent firebug有类似的功能?