掌握单步调试技巧，让代码问题无处藏身

什么是单步调试

写代码时遇到程序跑不起来、结果不对或者莫名其妙崩溃，很多人第一反应是加一堆 console.log 打印变量。但这种方式就像在黑夜里用手电筒找钥匙——范围小还容易漏掉重点。真正高效的排查方式是使用单步调试技巧。

单步调试，顾名思义，就是让程序一行一行地执行，随时查看变量状态、调用栈和流程走向。它不是高级工程师的专属技能，而是每个开发者都应该熟练掌握的基本功。

从一个常见场景说起

假设你在做一个购物车功能，总价计算总是多出10块。你检查了三遍代码，逻辑看起来没问题：

let total = 0;
for (let i = 0; i < cartItems.length; i++) {
    total += cartItems[i].price * cartItems[i].quantity;
}

如何开始单步调试

以 Chrome 浏览器为例，在代码中右键选择“检查”，打开开发者工具，切换到 Sources 面板。找到你的 JS 文件，点击行号就可以设置断点。刷新页面，当代码运行到这一行时会自动暂停。

此时你可以看到当前作用域内的所有变量值，鼠标悬停就能查看。按 F10 可以执行下一行（step over），F11 进入函数内部（step into），Shift+F11 跳出当前函数（step out）。这些快捷键用熟了，排查速度提升不止一倍。

别忽略调用栈和作用域信息

很多时候问题不在当前这行代码，而在调用它的上层函数。调试时左侧的 Call Stack（调用栈）能清楚展示函数是如何一层层被触发的。点击任意一层，可以跳转到对应的代码位置，查看当时的上下文环境。

比如你在一个 handleSave 函数里发现数据为空，顺着调用栈往上一看，原来是父组件传下来的 onSave 回调被错误地提前执行了一次，导致数据还没加载完就被提交了。

条件断点让调试更聪明

有时候循环跑了上千次，你只想看第500次某个变量的变化。手动按几百次 F10 显然不现实。这时可以用条件断点：右键点击断点，设置触发条件，例如 i === 500。只有满足条件时才会暂停，省时又精准。

巧用 Watch 监视表达式

除了看变量，你还可以在 Watch 面板添加自定义表达式，比如 users.filter(u => u.active) 或 Object.keys(config)。它们会实时更新，帮助你快速判断数据结构是否符合预期。

调试异步代码的小技巧

Promise 和 async/await 让代码更清晰，但也增加了调试难度。建议在 await 行前后都设断点，观察异步操作前后的状态变化。如果接口返回异常，可以直接在 Network 面板查看请求详情，结合断点定位问题源头。

比如你发现用户登录后头像没显示，调试发现 await fetchUser() 返回的数据里 avatarUrl 是 null，再往前查请求参数，原来是 userId 传成了字符串而非数字。

别忘了关闭断点

调试完记得清除或禁用断点，否则下次运行时程序会频繁中断，影响正常使用。尤其是团队协作项目，提交代码前一定要检查是否遗留了调试断点。

现代编辑器如 VS Code 支持保存断点配置，还能跨会话复用，适合长期维护复杂逻辑的模块。