javascript - 在 JavaScript 中找到页面上输入值修改的来源

Question

我正在尝试查找不必要的值修改的原因，以便消除该错误。当我关闭页面的 javascript 时，它会在加载后包含此元素:

<input type="hidden" value="5123" name="report[sub_district_id]" id="report_sub_district_id">

但是当我打开 JavaScript 时，页面加载后相同的元素看起来像这样:

<input type="hidden" value="" name="report[sub_district_id]" id="report_sub_district_id">

我无法弄清楚哪些代码取消了 value 属性的设置。

据我所知，有一种方法可以修改该值。我已经尝试在该方法中添加警报，但它没有被触发。我也尝试过注释掉该方法，但变化仍然发生。也许我的其他一些 JS 意外地连接到了这个元素，但这似乎不太可能。也许更改是由我的框架(Rails 和 Materialize)中的某些代码引起的。

我还尝试在此元素上添加 DOM 断点“属性修改”和“子树修改”，以及在父元素上添加“子树修改”，但这些断点都没有被触发。

当我的代码在页面加载后的某个时刻修改输入值时，“属性修改”断点会触发，但我试图找出“页面:”时发生的情况。 “change”事件被触发，而这个断点没有触发——可能是因为 DOM 还没有加载。

我已尝试过 this question 的答案但它们没有帮助，因为它们没有展示如何在加载 DOM 之前触发的元素更改事件上设置断点。

我在 Ubuntu 15.10(64 位)上使用 Chromium 浏览器 48.0.2564.116

如何找到此错误的原因？

Answer 1

将此代码插入页面顶行后进行调试。

setInterval(function() {
  var value = $("#report_sub_district_id").val();
  if(value !== 5123) debugger;
},10);

并且，也许任何 Chrome 扩展程序都可能导致该问题。您应该禁用所有 Chrome 扩展程序。