javascript - 当脚本代码更改文本时返回输入的 javascript 堆栈跟踪

Question

我想知道如何找出哪个 Javascript 文件正在更改我页面上输入的文本。

例如，我有一个带有文本输入的页面和 5 个包含的 javascript 文件，但我不知道哪个正在更改文本输入的值。

我试过使用更改事件，但是当文本被另一个脚本更改时，它不会触发。

1.js文件:

<script>
$(".MySection").children().children().eq(3).val("Text Changed!")
</script>

2.js文件:

<script>
$(".MySection").children().children().eq(3).val("Text Changed!")
</script>

Answer 1

简短的回答是你不能。您要的是 javascript 堆栈跟踪。

堆栈跟踪很容易强制/生成如下:

 $("#myText").change(function(){
  var e = new Error('dummy');
  var stack = e.stack.replace(/^[^\(]+?[\n$]/gm, '')
      .replace(/^\s+at\s+/gm, '')
      .replace(/^Object.<anonymous>\s*\(/gm, '{anonymous}()@')
      .split('\n');
  console.log(stack);
    });
});

可以在 Chrome 中使用浏览器开发工具 Ctrl+Shift+I 读取 console.log。

所以这一切都很好，但正如您正确指出的那样，当输入的值是动态设置时，更改事件不会触发，即通过代码，因此您没有地方可以放置堆栈跟踪代码以便获取堆栈跟踪，使您可以查看进行更改的代码/代码文件。

$(".MySection").children().children().eq(3).val("Text Changed!")

没有办法解决这个问题，因为您根本无法拦截事件。即使您注册/绑定(bind)到 propertychanged、change、input、keydown、paste、DOMSubtreeModified 事件，它也不会工作，因为这些事件都不会触发以响应输入文本值的动态更新。

$("#myText").bind("propertychanged, change, input, keydown, paste, DOMSubtreeModified", function(event){
  // call stack trace here, except these bindings WONT be fired whenever the val is set dynamically
});

您可能会开始追踪 DOM 4 Mutation Observers :

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations);
    // ...
});

var n = $("#myText").get(0);
// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(n, {
    subtree: true,
    attributes: true,
    childList: true,
    characterData: true,
    attributeOldValue: true,
    characterDataOldValue: true
});

但它们不会帮助您，因为它们不观察单个控件属性，而只是观察与 DOM 相关的更改。即添加和删除节点等。它们不允许您在输入中注册文本更改事件。

我只能说，如果您有一个您无法控制的网页，即您被排除在外，那么我认为您应该认真地重新考虑设计。