谷歌浏览器如何调试界面上动态元素
相信很多前端开发者都遇到过一个头痛的问题，页面上需要通过hover，鼠标滑入才会变化的部分UI，无法被调试。
已京东的一些商品分类的二级弹框为例。我们像调试这个弹框时，却发现选中后，弹框就隐藏了。
调试步骤
-
右键检查该弹框
-
在元素选项卡下方选中该弹框的父级节点
-
点击
...或者右键
选中 子树修改 和 属性修改 两个选项。
-
重新操作触发弹框显示
这个时候，界面会进入debugger状态
-
在开发者工具界面 点击选择元素按钮，选中我们想要调试的元素
这个时候可以看到。我们就可以调试动态元素了。
总结
该方法可以debugger的场景
- 节点属性的变化
- 子节点的变化
- 节点的移除
还包括 - hover
- active
- focus
...
快去体验下吧。
标签：界面,元素,弹框,选中,浏览器,节点,调试 来源： https://www.cnblogs.com/stones-3/p/15693349.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。