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

Question

我有一个带有打开的Dev/F12 工具（在 Chrome 中）的网页。

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

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

Answer 1

是的，你可以使用 Chrome 的 devtools DOM Breakpoints来做到这一点：

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

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

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