检测作用于DevTools

Question

我有一个包含开放 Dev / F12工具（在Chrome中）的网页。

当页面调整大小时，一些观察到的div的样式属性肯定会被一些JavaScript代码修改（chrome显示紫色的修改属性）：

有没有办法知道JS代码到底是做什么的，跟踪修改DOM元素的JS源？

Answer 1

是的，您可以使用Chrome的devtools DOM断点来执行此操作：

1. 在“元素”窗格中找到该元素（您已完成该操作）
2. 右键点击该元素，然后选择 Break on＆gt;属性修改（因为更改内联样式涉及修改style属性的值）

当修改发生时，断点将在此时停止JavaScript执行并在Sources选项卡中显示相关脚本。

如果您在某些时候需要查看我们的DOM断点列表，它们将位于Elements面板右侧面板的DOM Breakpoints选项卡中。