谷歌浏览器如何调试界面上动态元素
相信很多前端开发者都遇到过一个头痛的问题，页面上需要通过hover，鼠标滑入才会变化的部分UI，无法被调试。
已京东的一些商品分类的二级弹框为例。我们像调试这个弹框时，却发现选中后，弹框就隐藏了。
调试步骤
-
右键检查该弹框
-
在元素选项卡下方选中该弹框的父级节点
-
点击
...或者右键
选中 子树修改 和 属性修改 两个选项。
-
重新操作触发弹框显示
这个时候，界面会进入debugger状态
-
在开发者工具界面 点击选择元素按钮，选中我们想要调试的元素
这个时候可以看到。我们就可以调试动态元素了。
总结
该方法可以debugger的场景
- 节点属性的变化
- 子节点的变化
- 节点的移除
还包括 - hover
- active
- focus
...
快去体验下吧。