JS断点调试需精准定位：一、用事件监听器断点在触发入口暂停；二、函数首行设断点查入参与初始状态；三、用F10/F11/Shift+F11步进验证逻辑分支；四、通过调用栈底部定位真实源头并交叉验证。
页面交互异常时，JS 断点调试不是“试试看”，而是有明确路径的精准动作：从触发入口暂停，到变量状态验证，再到调用链回溯。关键不在打断点，而在断在哪儿、怎么读暂停后的信息。
一、先让代码在事件刚触发时停住
别等逻辑跑完再找问题。直接用事件监听器断点，让执行在第一个监听函数处就暂停：
- 打开 DevTools → Sources 面板 → 右侧“Event Listener Breakpoints”
- 展开 Mouse 或 Interaction，勾选 click / input / change 等对应事件
- 点击页面异常元素（比如不响应的按钮），代码立刻停在绑定该事件的那行 JS 上
这时你看到的不是业务逻辑中间态，而是源头——谁绑了监听器、在哪一行、是否被覆盖或未生效。
二、断点设在函数开头，看清入参和初始状态
如果已知异常发生在某个函数里（比如 handleSave()），不要点在中间计算行。把断点设在函数第一行大括号后：
立即学习“前端免费学习笔记（深入）”；
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
- 在 Sources 中找到该函数定义，点击函数名所在行号左侧空白处
- 刷新页面并触发交互，执行一进入函数就暂停
- 右侧面板 Scope 里立刻显示所有参数值（如 event、formData）、this 指向，以及闭包变量
常见问题当场暴露：参数是 undefined？event.target 是错的节点？this 指向 window 而非组件实例？不用猜，全在眼前。
三、用步进键逐行验证逻辑分支
暂停后别急着看变量，用键盘控制执行节奏：
- F10（Step Over）：执行当前行，跳到下一行；适合跳过普通赋值或已确认无误的调用
- F11（Step Into）：点进函数内部；遇到 handleXxx() 就按它，看是否真进了预期逻辑
- Shift+F11（Step Out）：快速跳出当前函数，回到调用它的那行；适合跳过调试无关的工具函数
比如一个 if-else 判断后行为异常，F10 走一遍，就能确认到底进了哪个分支、条件表达式结果是 true 还是 false。
四、结合调用栈定位真实源头
暂停后看右侧 Call Stack 面板，重点不是顶部，而是底部几层：
- 最底下常是 dispatchEvent、click() 或 HTMLButtonElement.onclick —— 这是浏览器发起事件的位置
- 往上第二、三层，大概率就是你写的 addEventListener 行或内联 onclick="xxx()" 的位置
- 若某帧显示 anonymous 或箭头函数，说明监听器是动态注册的，可点击该帧直接跳转到绑定代码
配合 Elements 面板选中目标元素，在 Console 输入 getEventListeners($0)，能列出所有绑定监听器及其源码位置，和调用栈交叉印证。
