检测作用于DevTools中元素的代码

Question

我有一个带有开放式Dev/F12工具的网页(在Chrome中).

调整页面大小时,一些JavaScript代码肯定会修改一个观察到的div的样式属性(chrome显示紫色的修改属性):

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

Answer 1

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

1. 在“元素”窗格中找到该元素（您已经完成了）
2. 右键单击该元素并选择“中断”>“属性修改”（因为更改内联样式涉及修改style属性的值）

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

如果您在某个时候需要查看 DOM 断点列表，它们位于“元素”面板右侧面板中的“DOM 断点”选项卡中。