使用 DOM Breakpoints 找到修改属性的 Javascript 代码

使用 Chrome 开发者工具的 DOM 断点功能可以让您快速找到修改了某一个 DOM 元素的 Javascript 代码。

在 Chrome 开发者工具里，选中想要监控的 DOM 元素，点击右键，选择 Break on->Attributes modifications:

之后在 DOM Breakpoints 的 tab 里能看到对应的断点:

然后回到 Chrome 里继续操作，Chrome 开发者工具的调试器就会自动在 DOM 的属性发生变化的地方停下来:

从调试器的调用上下文能了解到是下图第 17 行的 hide 方法设置了 display:none 的属性导致 DOM 断点的触发。

要获取更多 Jerry 的原创技术文章，请关注公众号"汪子熙":