Chrome调试html属性监控变量赋值事件

在用Chrome DevTools调试html时,有时想知道是哪一个js文件对dom元素做了赋值操作,这个Chrome原生就支持无需插件。

应用场景:

发现html页面样式出现问题,经调查后发现,是因为动态加入了一些class属性导致,由于页面中引用了很多js文件,一时不能确定是哪个js文件做的赋值操作。

这时需要对出现问题的html元素进行监控,查出是哪个js对html元素的attribute做了赋值操作。

解决方法:

打开chrome DevTools调试界面,用调试工具找到,并选中需要监控的html元素(Ctrl+Shift+C),在元素上点击右键(调试界面的[Elements]Tab页中),在弹出的菜单中勾选上[Break on->attribute modifications]。

Chrome 监控html元素赋值事件

然后刷新页面,如果js对监控的html元素做了赋值操作,Chrome DevTools就能监控到这个赋值事件,并弹出js调试窗口,帮助定位出赋值事件发生的源头。

注意:确认对某一个html元素设置的监控已生效,一般监控生效的html元素前面都会有一个蓝色小圆点,如下图所示:

Chrome 监控html元素赋值事件