查找正在更改 DOM 元素的 javascript

Posted 2023-03-05

【中文标题】查找正在更改 DOM 元素的 javascript

【英文标题】：Find javascript that is changing DOM element

【发布时间】：2014-09-17 18:43:46

【问题描述】：

有什么技术可以用来找出 javascript 正在改变 html 元素吗？我很难找到特定元素如何在加载时添加display:none 的内联样式。我知道我最终会找到执行此操作的脚本，但我希望该过程更容易。

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

【问题讨论】：

为什么要注意把所有的 JS 放到一个目录中，然后对 'none' 执行一次 grep？

【参考方案1】：

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

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

【讨论】：

@VitalyZdanevich 你能提供一个codepen的例子吗？

好的，所以你不能设置这种断点并重新加载页面......似乎只适用于源断点。

【参考方案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

【讨论】：

是的，看来 DOMAttrModified 在所有主要浏览器中都已弃用 according to MDN

【参考方案3】：

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

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

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

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

【讨论】：

当我发布问题时，我会很感激！我能够做我需要做的事，但这是我所缺少的。