使用dom breakpoint找到修改属性的javascript代码

Created by Jerry Wang, last modified on Sep 23, 2014

使用dom breakpoint能快速找到修改了某一个dom element的JavaScript code位于何处。
在Chrome development tool里,选中想要inspect的dom element,右键选择Break on->Attributes modifications:
使用dom breakpoint找到修改属性的javascript代码
之后在DOM Breakpoint里能看到对应的entry:
使用dom breakpoint找到修改属性的javascript代码
点击Resume script execution,自动在dom attribute发生变化的地方停下来:
使用dom breakpoint找到修改属性的javascript代码
从callstack能得知是jQuery的hide方法设置了display:none的属性。
使用dom breakpoint找到修改属性的javascript代码