调试器断点怎么设？手把手教你快速上手

写代码的时候，程序跑得不对劲，光靠眼睛看逻辑太费劲。这时候用调试器加个断点，程序运行到指定位置自动停下来，变量值、执行流程一眼就能看清。那调试器断点怎么设？其实没你想的那么复杂。

常见的几种设断点方式

大多数现代开发工具，比如 Visual Studio、VS Code、IDEA 或者浏览器的开发者工具，设断点的方法都大同小异。最简单的方式就是在代码行号左边点击一下。比如你在 VS Code 里打开一个 JavaScript 文件：

function calculateTotal(price, tax) {
    let total = price + tax;
    return total;
}

你想看看 total 算出来是多少，直接在第二行行号左侧点一下，出现一个红点，这就加上断点了。下次函数执行到这里，程序就会暂停。

快捷键也能快速操作

用鼠标点来点去有时候慢，记住快捷键效率更高。在多数编辑器里，把光标放到某一行，按 F9 就能切换断点。再按一次，断点就取消了。Chrome 开发者工具里也一样，打开 Sources 面板，找到脚本文件，点行号或者用快捷键都能搞定。

条件断点：只在特定情况下停下

有时候你不想每次执行都停，只想在某个变量达到特定值时才中断。比如循环跑了 100 次，你只关心第 50 次的情况。这时候就得用条件断点。

在断点上右键，选择“编辑断点”或“添加条件”，输入表达式就行。例如：

i == 50

这样只有当循环变量 i 等于 50 的时候，程序才会停下来，省得一遍遍手动继续。

别忘了查看变量和调用栈

断点触发后，别光盯着代码看。右边通常有 Variables 面板，能看到当前作用域里所有变量的值。Call Stack 能告诉你这个函数是怎么被一步步调过来的。这些信息结合断点一起用，查问题效率翻倍。

比如你调试一个网页登录功能，发现用户名没传进去。在处理表单的那行设个断点，一停，马上就能看到 username 是不是空，是前端没取到，还是接口调用时漏传了参数。

断点不是万能，但能少走很多弯路

新手容易两个极端：要么完全不用调试器，全靠 console.log 打印；要么设一堆断点，结果程序老是停，烦得不行。合理使用，该停的时候停，才能快速定位问题。

下次代码跑出意料之外的结果，别急着删重写，先试试加个断点，看看程序到底走到了哪一步。