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 with Materialize）。

我也尝试过添加DOM断点＆＃34;属性修改＆＃34;和＆＃34;子树修改＆＃34;在这个元素上，＆＃34;子树修改＆＃34;在父元素上，但没有触发这些断点。

修改＆＃34;属性＆＃34;当我的代码在加载页面之后的某个时刻修改输入的值时，断点会触发，但我试图找到＆＃34; page：change＆＃34时发生的事情;事件被触发，并且此断点未触发 - 可能是因为尚未加载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扩展程序。

Answer 2

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属性修改上添加断点。

但是在这种情况下，您知道有问题的元素（输入元素）和被搞乱的属性（值属性），因此您可以完成this answer中建议的内容，并且重新定义了这个属性。

此处的示例代码：

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文件的第一行设置断点。

在javascript

2 个答案: