掌握浏览器断点调试从“能停、能看、能走”三步入手：一、设断点（点击行号旁空白或写debugger）；二、观察变量（悬停查看、Watch添加表达式、Call Stack查调用链）；三、合理步进（F10跳过、F11进入、Shift+F11跳出、F8继续）。
掌握浏览器断点调试不需要先啃完所有 JavaScript 理论，而是从“能停、能看、能走”三步开始，边写边调，越用越熟。
一、先让代码在你想看的地方停下来
打开 Chrome（或其他 Chromium 内核浏览器），按 F12 → 切到 Sources 面板 → 在左侧文件树中找到你的 JS 文件 → 点击行号左侧空白处，出现蓝色标记即为断点设置成功。刷新页面，执行到该行就会自动暂停。
小技巧：
- 想只在特定条件触发时暂停？右键断点 → Edit breakpoint → 输入条件，比如
i === 5或data == null - 不想动鼠标？直接在代码里写
debugger;，运行时也会自动断住 - 临时禁用所有断点？点顶部工具栏的 Deactivate breakpoints（两个竖线图标）
二、学会观察变量和执行路径
断住后，右侧会显示当前作用域的变量值（Scope）、调用栈（Call Stack）和可手动添加的监视项（Watch）。
重点操作：
- 把鼠标悬停在变量名上，立刻看到它的当前值
- 在 Watch 面板点击 +，输入
arr.length、user.name或任意表达式，实时跟踪变化 - 展开 Call Stack，能清楚看到函数是怎么一层层调用进来的，尤其适合排查嵌套回调或事件触发链
三、用对步进方式，避免迷失在代码里
顶部有四个关键按钮（快捷键更高效）：
- Step over (F10)：执行当前行，不进入函数内部。适合跳过已确认无误的工具函数
- Step into (F11)：进入当前行调用的函数内部。适合想看清某个函数内部逻辑时使用
- Step out (Shift+F11)：快速跳出当前函数，回到调用它的地方。当进得太深、想快进到函数返回时特别管用
- Resume (F8)：继续运行，直到下一个断点或脚本结束
例如调试一个 for 循环，用 F10 可以逐次观察 i 如何递增；遇到 processItem(item) 调用，想确认处理逻辑就按 F11 进去，确认完按 Shift+F11 直接出来，不用一行行按到末尾。
四、带着问题练，比照着改错学得最快
别等出大 bug 才用调试。每天写几行新逻辑，就主动加个断点验证：
- 写完一个数组遍历，打断点看
i和arr[i]是否如预期变化 - 实现表单提交前校验，断点设在
submit事件回调开头，检查event.target.elements拿到的值对不对 - 发现接口返回数据结构和想象中不一样？在
.then()回调第一行打断点，直接看res.data长什么样
每次调试花 2–3 分钟，坚持一周，你会自然形成“哪里不确定，就在哪停一下”的直觉。
