浏览器断点调试核心是“能定位、能暂停、能看懂”，掌握行断点、DOM/事件/XHR断点及调用栈和变量监视，即可高效解决90% JS逻辑问题。
学浏览器断点调试不用从头啃文档，关键抓住“能定位、能暂停、能看懂”三个动作。核心就两块：代码行断点 + DOM/事件/XHR等上下文断点，配合调用栈和变量监视，90%的 JS 逻辑问题都能快速揪出。
一、先掌握最常用的行断点
打开开发者工具（F12），切到 Sources 面板，在 JS 文件行号左侧单击即可设断点。刷新页面或触发对应逻辑，执行到这一行就会暂停。
- 右键断点可加条件，比如
i === 3或data?.length > 0，避免在循环里反复中断 - 代码里写
debugger;是等效的——适合动态生成的函数、异步回调、框架内部钩子等找不到源文件的地方 - Webpack 打包项目？去 top → webpack:// 目录下找原始文件，别在 dist 或 bundle.js 里硬找
二、DOM 变动断点专治“谁改了我的元素”
当页面结构或属性莫名变化，又找不到调用位置，就用 DOM 断点：
- 在 Elements 面板中右键目标节点（如一个
<div id="list">） <li>选 <strong>Break on → Subtree modifications</strong>：子节点增删、<code>innerHTML改写、文本内容变都会停 - 选 Attribute modifications：class、style、data-id 等任意属性被改时暂停
- 选 Node removal：该节点被
remove()或replaceChild()移除时触发 -
点按钮没反应？ 用 Event Listener Breakpoints（Sources → 右侧栏 → Event Listener Breakpoints），勾选
click、input等，点一下就停在绑定事件的那行 -
接口参数总不对？ 开 XHR/Fetch Breakpoints，输入 URL 关键字（如
/login），请求发出前就暂停，直接看fetch()调用处的参数 - 一刷新就报错，但不知道哪崩的？ 开 Pause on caught/uncaught exceptions（Sources 右上角 ⚡ 图标），错误抛出瞬间就停住，调用栈清清楚楚
- 看右侧 Scope 面板：当前函数的局部变量、闭包变量、全局变量一目了然
- 在 Watch 栏手动加表达式，比如
user.profile?.name或items.filter(x => x.active)，实时观察计算结果 - 点开 Call Stack：从上往下读，顶部是最新调用，点击任一层可跳转到对应源码，快速回溯路径
- 善用调试按钮：F8 继续运行、F10 下一行（不进函数）、F11 进入函数、Shift+F11 跳出当前函数
注意：断点只对当前已渲染在 Elements 中的节点生效；新创建的节点要先选中再设，或提前在父级设 Subtree 断点缩小范围。
三、按场景选对断点类型
不同问题匹配不同断点，效率翻倍：
四、暂停后怎么查才不懵
断点停住只是开始，真正有用的是接下来这几步：
不复杂但容易忽略：每次暂停后花10秒扫一眼 Call Stack 和 Scope，比盲目 console.log 十次更准。
