浏览器断点调试核心是“能定位、能暂停、能看懂”，掌握行断点、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() 移除时触发

注意：断点只对当前已渲染在 Elements 中的节点生效；新创建的节点要先选中再设，或提前在父级设 Subtree 断点缩小范围。


Json Repair Kit
使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。
下载

三、按场景选对断点类型

不同问题匹配不同断点，效率翻倍：

• 点按钮没反应？ 用 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 跳出当前函数

不复杂但容易忽略：每次暂停后花10秒扫一眼 Call Stack 和 Scope，比盲目 console.log 十次更准。