单步执行和断点区别：调试代码时怎么选

写代码免不了出错，调试就成了家常便饭。在用调试工具时，经常听到“单步执行”和“断点”，很多人刚开始分不清它们到底有啥不一样，什么时候该用哪个。其实搞明白这两个概念，调试效率能提升一大截。

断点：让程序停在你想看的地方

断点就像是你在代码里设的一个“路障”。你告诉调试器：“运行到这行，先别动，让我看看现在啥情况。” 比如你在处理用户登录的函数里怀疑某个判断出了问题，就可以在那行前面打个断点。程序运行到这儿就会暂停，你可以查看当前变量的值、调用栈，甚至修改数据继续试。

举个例子，有段代码：

function calculateDiscount(price, isVIP) {
    let discount = 0;
    if (isVIP) {
        discount = 0.2;
    } else if (price > 100) {
        discount = 0.1;
    }
    return price * (1 - discount);
}

如果你怀疑 isVIP 为 true 时没进分支，就在 if (isVIP) 那行加断点。运行程序，一到这儿就停下，立马能看到 isVIP 到底是 true 还是 false，省得靠猜。

单步执行：一行一行慢慢走

单步执行不是一开始就用的，通常是你已经停在某个断点上之后才开始操作。它让你控制程序一步一步往下走。常见的有三种方式：

• Step Over：执行当前这行，但不进函数内部。比如调用了 calculateDiscount()，点了 Step Over，它会直接算出结果，不会跳进函数里逐行看。
• Step Into：如果当前这行调用了函数，点了它就会“钻进去”，从函数第一行开始继续单步。
• Step Out：当你已经进入一个函数，想赶紧跑完它回到上一层，就用这个。

还是上面那个例子。你停在 if (isVIP) 这行，点了 Step Into，发现条件成立，进入了赋值 discount = 0.2。再点一次，走到返回语句，一步步确认逻辑没问题。

它们的关系：配合使用才高效

断点帮你快速跳到可疑区域，避免从头跑到尾浪费时间；单步执行则是在你到达那里之后，仔细观察每一步的变化。光设断点不单步，可能看不出中间哪一步出了岔子；只单步不设断点，就得从程序开头按几十次，人都麻了。

比如你调试一个网页加载流程，从点击按钮到数据显示要经过五六层函数调用。你不可能一步步从点击事件开始点下去。更合理的做法是：在数据渲染前的关键函数打个断点，程序自动跑到那儿停下，然后用单步执行慢慢往下走，看哪一步数据变了样。

说白了，断点是“快进到重点”，单步是“逐帧回放细节”。两者搭配，查 bug 才不靠运气。