找到正在改变DOM元素的javascript

Question

有没有什么技术可以用来找到改变HTML元素的javascript？我在查找特定元素如何display:none在加载时添加内联样式时遇到一些麻烦.我知道我会找到最终完成此操作的脚本,但我希望这个过程更容易.

我的理想解决方案是在修改DOM元素后立即破解javascript执行的一些方法.我知道Chrome的开发工具能够右键单击一个元素并选择Break On> Attribute Modifications.但是,这会在页面加载期间发生,所以如果我可以在所有其他脚本声明之前插入一些脚本,这些脚本声明"监视带有类XYZ的元素"并在元素修改时中断JS执行,那将是非常好的.然后,JS执行将破坏我可以看到修改元素的JS,或者可能通过查看调用堆栈找到,但无论哪种方式,我都能看到触发中断发生的脚本.我找到了一些答案告诉我如何使用Chrome开发工具/ Firebug,但就像我说的,这个问题是关于程序化的方法.

Answer 1

右键单击DOM元素> Break on> Attributes Modifications

通过http://www.elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/中的#3

Answer 2

您可以使用 :-

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

看看这个: -

使用Jquery更改css属性时的事件检测

Answer 3

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

我解决了这个问题，但在有问题的元素之后立即放置了一个脚本块。

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

然后我能够附加 dom motification 断点。通过右键单击元素并在开发人员工具中选择“中断”->“属性修改”，如其他答案中所述。