Event Listener Breakpoints用于在事件分发进入处理函数前自动暂停执行，便于检查调用栈和DOM状态；需在Sources面板→Event Listener Breakpoints中勾选Document下的submit或Mouse下的click。
在 Chrome DevTools 中，Event Listener Breakpoints 不是用来“监听”事件的常规调试手段，而是用来在**事件分发（dispatch）过程中、进入事件处理函数前**自动暂停 JS 执行，方便你检查调用栈、作用域和 DOM 状态。它不替代 console.log 或 debugger，但能精准捕获“谁响应了这个点击/提交”，尤其适合排查未直接绑定、或由框架/库动态注册的事件。
如何设置表单提交（submit）断点
表单提交属于 Submit 事件，归类在 Document 下：
- 打开 DevTools（F12 或 Cmd+Opt+I），切换到 Sources 面板
- 右侧边栏找到 Event Listener Breakpoints（若不可见，点右上角
⋯→More Tools→Event Listener Breakpoints） - 展开 Document 分组 → 勾选
submit - 触发表单提交（如点击提交按钮），执行会立即停在
submit事件对应的处理函数第一行（或 EventTarget.dispatchEvent 的内部位置）
注意：该断点对原生 <form> 的 submit 有效；若用了 event.preventDefault()，断点仍会触发，只是后续页面跳转被阻止。
如何设置点击（click）断点
点击事件属于 Mouse 类别，但需注意层级：
- 在 Event Listener Breakpoints 中展开 Mouse → 勾选
click - 也可勾选
mousedown或mouseup辅助定位（click 是它们组合后触发的） - 点击任意有 click handler 的元素（包括委托到父级的），DevTools 就会在实际执行 handler 的那一行暂停
小技巧：如果页面 click 太频繁，可先在 Elements 面板中选中目标元素，再勾选 Selected node only（右键节点 → Break on → attribute modifications 不适用，但 Event Listener Breakpoints 本身不支持“仅当前节点”，所以建议临时禁用其他无关事件断点）。
为什么点了没断住？常见原因
Event Listener Breakpoints 只对已注册的事件监听器生效，且依赖浏览器事件系统：
- 事件未真正绑定：JS 还没执行完、监听器尚未添加（比如异步加载后才绑定），此时断点无效
-
用了 passive: true：某些 touch/click 监听器设了
{passive: true}，Chrome 可能跳过断点（但普通 click 一般不受影响） - 事件被移除或替换：比如 React/Vue 组件卸载重挂，旧监听器已清除，新监听器需重新触发绑定逻辑才能被捕获
-
触发的是自定义事件（CustomEvent）：默认不会触发 click/submit 断点，需手动勾选 Custom →
custom，或改用debugger插入断点
比 Event Listener Breakpoints 更快的替代方案
当目标明确时，这些方法往往更高效：
- 在 Elements 面板中右键目标元素 →
Break on→node removal/attribute modifications（适合监听 DOM 变化引发的事件） - 直接在 JS 文件里搜索
.addEventListener(.+click或onsubmit=，在 handler 第一行加debugger - 用 Console 执行：
getEventListeners($0)（$0 是 Elements 中选中的元素），查看绑定的所有监听器及其源码位置，再手动断点
Event Listener Breakpoints 是“守株待兔”，适合探索性调试；而 debugger 和 getEventListeners 是“主动出击”，更适合精准定位。
