前端调试隐藏元素

再父元素

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

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

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

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

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

移动子节点顺序

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

为什么要用它:

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

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

注意:

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

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

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

相关推荐
IMPYLH1 分钟前
HTML 的 <td> 元素
前端·html
gnip12 分钟前
Flutter GetX 三件套开发规范(Skill)
前端·flutter
张小姐的猫22 分钟前
【AI大模型接入SDK】 —— 前端页面 & 项目总结与拓展
前端·数据结构·数据库·c++·人工智能·chatgpt
web打印社区25 分钟前
远程打印:WebSocket 与 HTTP 轮询怎么选
前端·vue.js·websocket·网络协议·http·electron·pdf
吴声子夜歌29 分钟前
HTML——庞杂的表单控件元素(一)
前端·html
天天喝旺仔1 小时前
浏览器渲染原理:从解析 HTML/CSS、构建渲染树到重排重绘与首屏优化
前端·javascript·css·性能优化·html
明月_清风1 小时前
前端已死?别急,这可能只是所有行业的开始
前端·ai编程
明月_清风1 小时前
干了 6 年前端,我是怎么一步步转型到 AI 的?
前端·后端·ai编程
乘风gg1 小时前
花了 100 亿 Token 后,我发现 Code is cheap 是最大的谎言
前端·ai编程·claude
IMPYLH1 小时前
HTML 的 <textarea> 元素
前端·html