如何跟踪DOM元素发生了什么？

Question

我正在使用masked input plugin作为网络应用。我正在使用$(document).ready()中的类选择器应用蒙版：

$(".Primary_Phone_Number").mask("(999) 999-9999");
$(".ZipCodeMask").mask("99999");
$(".StateMask").mask("aa");
$(".date").mask("99/99/9999");

但是，除了电话号码之外的所有内容都会丢失它的掩码。准备好文件后，如果我再次在控制台中运行这些文件，他们就会得到并保留他们的面具。

这是一个大型的网络应用程序，每个页面都有1000行javascript，并且有很多不同的选择器围绕着进行更改以及许多ajax调用。我们只测试IE中的Web应用程序，因为它是一个内部项目。 IE10中是否有任何可用的东西让我知道特定DOM元素何时被操纵？

Answer 1

如果您使用Chrome（并且可以使用它进行调试，如果问题再现），您可以在DOM修改上设置断点。

检查元素，右键单击它，选择“Break on ...”并选择事件类型（例如子树修改）。 More info on this

如果您仍想在IE（9+）中执行此操作，则可以使用Mutation Events并在修改元素时中断JS执行。

E.g。

el.addEventListener("DOMSubtreeModified", function(ev) {
  debugger;
}. false);