谷歌浏览器如何调试界面上动态元素

谷歌浏览器如何调试界面上动态元素

相信很多前端开发者都遇到过一个头痛的问题，页面上需要通过hover，鼠标滑入才会变化的部分UI，无法被调试。
已京东的一些商品分类的二级弹框为例。我们像调试这个弹框时，却发现选中后，弹框就隐藏了。

调试步骤

• 右键检查该弹框
  

• 在元素选项卡下方选中该弹框的父级节点
  

• 点击 ... 或者右键
  

  选中 子树修改 和 属性修改 两个选项。

• 重新操作触发弹框显示
  这个时候，界面会进入debugger状态
  

• 在开发者工具界面 点击选择元素按钮，选中我们想要调试的元素
  

  这个时候可以看到。我们就可以调试动态元素了。

总结

该方法可以debugger的场景

• 节点属性的变化
• 子节点的变化
• 节点的移除
  还包括
• hover
• active
• focus
  ...
  快去体验下吧。