如何设置断点：调试代码的实用技巧（进阶教程）

写代码时，程序跑起来结果不对，光靠眼睛看逻辑很难发现问题在哪。这时候，设置断点就是最直接的办法。断点能让你在特定位置暂停程序运行，一步步查看变量变化和执行流程，就像把视频调成逐帧播放一样。

什么是断点

断点不是物理上的“点”，而是你在代码某一行上做的一个标记，告诉调试器：“运行到这儿先停一下”。停住之后，你可以查看当前所有变量的值、调用栈的情况，甚至修改数据继续运行。

在浏览器里设置断点

前端开发最常用的场景就是在浏览器开发者工具里调试 JavaScript。打开 Chrome 的开发者工具（F12 或右键“检查”），切换到 Sources 面板，在左侧找到你的 JS 文件，点击行号就能设置断点。

比如有这样一段代码：

function calculatePrice(quantity, price) {
    let total = quantity * price;
    if (total > 100) {
        total = total * 0.9;
    }
    return total;
}

如果发现打折后的价格算错了，可以在 let total = quantity * price; 这一行点一下行号，打上断点。刷新页面，当代码执行到这里就会暂停，你可以在右侧看到 quantity 和 price 的具体值，一步步往下走，看是哪一步出了问题。

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

有时候你不想每次执行都停下来，比如在一个循环里，只想看第 10 次循环的数据。这时候可以用条件断点。

在行号上右键，选择“Add conditional breakpoint”，输入条件，比如 i === 10。这样只有当条件满足时才会暂停，避免频繁打断调试节奏。

在 VS Code 中调试 Node.js

后端用 Node.js 写接口，也可以设置断点。配合 VS Code 和调试配置文件，打开 .vscode/launch.json，添加一个启动配置：

{
    "type": "node",
    "request": "launch",
    "name": "启动调试",
    "program": "${workspaceFolder}/app.js"
}

然后在代码中点击行号设断点，按 F5 启动调试。程序运行到断点处就会暂停，可以直接在编辑器里查看变量状态。

别忘了移除断点

调试完记得清理断点，尤其是团队协作项目。留着断点可能让别人运行时莫名其妙卡住。在开发者工具或编辑器里可以一键清除所有断点，或者手动一个个取消。

断点不是高级玩家的专属技能，它是每个写代码的人都该熟练掌握的基本功。遇到问题别急着猜，设个断点，亲眼看看程序到底在干什么。