在javascript中的page ready中查找输入值修改的来源

find source of input value modification on page ready in javascript

本文关键字：修改 输入 查找 中的 javascript page ready      更新时间：2023-09-26

我正试图找到不需要的值修改的原因，以便删除该错误。当我关闭页面的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 with Materialize）。

我还尝试在这个元素上添加DOM断点"attribute modified"answers"subtree modified"，在父元素上添加"subtree-modified"。但这些断点都没有被触发。

当我的代码在页面加载后的某个时刻修改输入的值时，"attribute modified"断点确实会触发，但我正在努力寻找当"page:change"事件被触发时会发生什么，而这个断点没有触发-可能是因为DOM还没有加载。

我已经尝试了这个问题的答案，但它们没有帮助，因为它们没有显示如何在加载DOM之前触发的元素更改事件上设置断点。

我在Ubuntu 15.10（64位）上使用Chromium浏览器48.0.2564.116

如何查找此错误的原因？

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

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

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

TL；DR是没有简单的方法。

因此，从实际更改的代码向后看，我认为浏览器的调试工具没有办法在这里设置断点。然而，如果对正在更改的dom节点的属性有一个合理的猜测，您可以（假设您在页面中运行得足够快）设置一个断点来帮助您。

您发现有问题的代码是$('#parent-div-id input').val('')。

现在jQuery中的.val（）只找到实际的node元素并设置node.value="blah"；这里的重要区别在于，它更改的是节点上的"属性"，而不是"属性"。您会注意到，所有DOMAttribute等断点都与节点属性有关。如果您获取一个节点并编辑html的属性，例如执行$('#parent-div-id input').attr('value', 'blah')，断点就会被命中。节点上的属性列表比HTML属性列表大得多，调试工具只在修改HTML属性时设置断点。

然而，在这种情况下，您知道有问题的元素（输入元素）和被打乱的属性（value属性），所以您本可以按照这个答案中的建议进行操作，并重新定义该属性。

此处的示例代码：

var node = $('#parent-div-id input')[0];
Object.defineProperty(node, 'value', {
    get: function () {
        return node._value;
    },
    set: function (value) {
        debugger; // sets breakpoint
        node._value = value;
    }
});

您所需要做的就是让代码在页面中尽早运行。要做到这一点，我可能会在网络选项卡中加载的第一个javascript文件的第一行设置一个断点

相关文章：