Question

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

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

Answer 1

右键点击DOM元素＆gt;打破＆gt;属性修改

通过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);

看看这个： -

Event detect when css property changed using Jquery

Answer 3

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

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

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

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

找到正在改变DOM元素的javascript

3 个答案: