寻找改变DOM元素的JavaScript代码

Question

有没有一些技巧可以帮助我找到哪个JavaScript正在修改HTML元素？我发现一个特定的元素在加载时会添加一个内联样式display:none，但我很难找到是哪个脚本导致的。我知道最终会找到做这件事的脚本，但我想让这个过程变得更容易。

我的理想解决方案是在DOM元素被修改时立即中断JavaScript执行的某种方式。我知道Chrome的开发工具可以右键单击一个元素并选择“断点”>“属性修改”。但是，由于这是在页面加载期间的某个时候发生的，因此如果我能在所有其他脚本声明之前插入一些脚本，以便“监视带有XYZ类的元素”，并在元素修改时中断JS执行，那将非常好。然后，JS执行要么会在我可以看到修改元素的JS处中断，要么可能可以通过查看调用堆栈来找到，但无论哪种方式，我都能够看到引发中断发生的脚本。我已经找到了一些答案，告诉我如何使用Chrome开发工具/ Firebug来做到这一点，但正如我所说，本问题是关于程序化方法的。

- p e p

---

为什么不把所有 JS 文件放到一个目录中，然后使用 grep 命令搜索“none”呢？ - Ed Heal

Answer 1

右键单击DOM元素>断点>属性修改

来自https://elijahmanor.com/blog/7-chrome-tips-developers-designers-may-not-know中的#3

- Nighto

---

@VitalyZdanevich，您能提供一个 CodePen 示例吗？ - Nighto

好的，所以你不能设置这种断点并重新加载页面...只有源代码断点似乎可以使用。 - Tyguy7

Answer 2

被接受的答案并没有完全回答这个问题，因为它没有帮助页面加载。

我通过在相关元素紧随其后放置一个脚本块来解决了这个问题。

<script type="text/javascript"> debugger; </script>

然后，我能够附加 DOM 修改断点。如其他答案中所描述的，在开发者工具中右键单击该元素并选择“断点” -> “属性修改”。

- Colin

---

如果我发布问题时有这个，我会很感激的！虽然早先我能够完成我需要的任务，但这个是我缺少的。 - p e p

Answer 3

你可以使用：-

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

请看这个链接：

使用Jquery检测CSS属性变化的事件

- Alok

---

是的，根据MDN（https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent），看起来DOMAttrModified在所有主要浏览器中都已被弃用。 - Steven Kalt

看起来替代DOMAttrModified的方法是使用较新的MutationObserver。然而，这个答案并没有直接帮助提问者找出他们需要的东西，除非你加上一个添加调试语句和检查堆栈的提示，或者使用console.trace()代替console.log()。 - shaune