查找哪些 javascript 更改了 DOM?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11268457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 12:36:13  来源:igfitidea点击:

Find what javascript changes the DOM?

javascriptdebugging

提问by Ben

I've been working with a ton of other's JS recently, and am starting to really hate trying to debug it. Even with Chrome's dev tools I can't track down a lot of the DOM changes that are taking place during page load.

我最近一直在使用大量其他人的 JS,并且开始非常讨厌尝试调试它。即使使用 Chrome 的开发工具,我也无法追踪页面加载期间发生的许多 DOM 更改。

Are there any tools that will show me what part of the DOM (say an added attribute) was done by what JS?

有什么工具可以告诉我 DOM 的哪一部分(比如添加的属性)是由什么 JS 完成的?

Thanks

谢谢

回答by Jay

In Chrome dev tools, you have the option of breaking execution when the DOM changes. enter image description here

在 Chrome 开发工具中,您可以选择在 DOM 更改时中断执行。 在此处输入图片说明

Also a screenshot to illustrate Wolfram's answer (+1)

还有一个截图来说明 Wolfram 的答案(+1)

enter image description here

在此处输入图片说明

回答by Wolfram

A minor addition to Jayraj's answer: Breakpoints on DOM Mutation Events. Right click on any element and you can select Break on Subtree Modificationsand Break on Attributes Modificationsand Break on Node Removal.

Jayraj 答案的一个小补充:DOM 突变事件上的断点。右键单击任何元素,您可以选择Break on Subtree ModificationsandBreak on Attributes ModificationsBreak on Node Removal

This is also possible using Firebug: right click an element and you have some options to monitor it for changes.

这也可以使用Firebug:右键单击一个元素,您可以通过一些选项来监视它的变化。