Chrome根据DOM属性加js断点

有的时候调页面样式时会莫名其妙出现错,比如某个东西不该显示的时候显示出来了。或者代码太多,不记得是哪个地方控制的这个地方。或者想看看别人页面的代码是怎么实现的。这时可以利用Chome的这个功能来调试。

1.选中要观察的DOM,右键”break on” -> “attribute modifications”来观察这个DOM的属性变化(一般情况下改变样式都是在改class和style属性)。

2.正常操作触发这个DOM的属性变化,当发生变化后会自动跳到断点初,这时看右边的call stack即可找到是哪个地方修改的属性。如果代码压缩了不方便看,可以点左下角的”{}”按钮来格式化代码。

 

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注