前端调试隐藏元素

再父元素

Break on subtree modifications 是 Chrome Elements(元素) 面板里,对某个 DOM 节点右键时出现的一项调试功能,意思是:

当这个节点下面的子节点有任何变动时,自动暂停 JavaScript 执行(断点)。

这里的「子树」指:该节点本身 + 它内部所有后代节点。

会触发暂停的典型情况包括:

增加、删除子节点(例如插入一条列表、弹出层挂到 body 下)

移动子节点顺序

某些情况下子节点的属性被改(具体实现上不同版本可能和「子树修改」的划分略有差异,但核心是 DOM 结构变化)

为什么要用它:

有些 UI(如下拉、tooltip)一出现就依赖脚本改 DOM,鼠标一移开又删掉。你很难用鼠标稳定选中。

对父容器(或 document.body)勾选 Break on → subtree modifications 后,再去触发「显示」操作,一旦脚本往这个子树里插节点,执行会立刻停住,此时 DOM 已经更新,你可以在 Elements 里慢慢点开、选中刚出现的那块。

注意:

暂停会很频繁------任何子树里的 DOM 变动都会停。适合短时间打开、找到目标后记得在同一节点上再右键取消(或刷新页面),否则会一直打断。

一句话:「子树有改动就断下来」,方便在 DOM 刚被改完的那一刻检查结构。

此时一改动元素就会断住,然后再断点调试进入下一步,则消失的元素就出来了,然后鼠标选中消失的元素即可

相关推荐
excel1 小时前
IndexNow:让搜索引擎更快发现网站更新的主动通知协议
前端·后端·架构
子兮曰1 小时前
CSS 复现 23 种设计风格:从拟物到液态玻璃的成本阶梯与兜底写法【实战】
前端·css·视觉设计
虚无境2 小时前
如何用AI帮我写出实用的插件
前端·javascript·ai编程
柳杉3 小时前
从数字化到数智化:3D 可视化大屏的下一个五年
前端·ai编程·数据可视化
风骏时光牛马3 小时前
从零到实战:AI全栈学习进阶路线
前端
FRing034 小时前
JavaScript入门到精通二十六(变量提升、函数剩余参数、展开运算符、ES6箭头函数)
开发语言·前端·javascript·es6·箭头函数
用户360055579004 小时前
Kestrel_VLLM - 15 · decode 优化四连击:19ms → 8ms
前端
IT_陈寒4 小时前
JavaScript的闭包陷阱,这个坑我躺了三天才爬出来
前端·人工智能·后端
计算机魔术师4 小时前
Microsoft Research 与合作者证明 31 年历史的 KLS 猜想
前端
weixin_417396834 小时前
桌面云终端PXE启动失败怎么排查?从DHCP Option到镜像下发
开发语言·前端·php·技术·酒店·综合布线·弱电