代码断点怎么设置？VS Code/Chrome/PyCharm 实用教程

写代码时遇到 bug，光靠眼睛盯半天也看不出哪行出问题？这时候，断点就是你的‘暂停键’——让程序跑到某一行就停下来，看看变量值、执行路径、调用栈，一目了然。

什么是断点

断点不是删除代码，也不是加个 print，而是告诉调试器：‘到这里先别动，等我查完再继续。’就像视频播放时按暂停，你随时能看当前画面、拖进度条、甚至倒回去重放。

主流编辑器/IDE 怎么设断点

VS Code（前端、Python、Node.js 常用）

打开代码文件，在想暂停的那行左侧灰色边栏上，轻轻点击一下——出现一个红点，就成了。比如调试 JavaScript：

function calculateTotal(price, tax) {
  const subtotal = price * 1.1;
  const total = subtotal + tax; // ← 在这行左边点一下，红点亮起
  return total;
}

按 F5 启动调试（需配置 launch.json），运行到这行就会自动停住。鼠标悬停在 subtotal 或 total 上，就能实时看到值是多少。

PyCharm / IntelliJ（Python/Java 主力）

同样是在行号左侧的空白区域单击，出现红色圆点。右键还能选‘More breakpoint settings’，设置条件断点——比如只在 i > 100 时才暂停：

for i in range(200):
    result = process(i)
    print(result)  # ← 右键设条件断点：i > 100

Chrome DevTools（网页前端调试）

F12 打开开发者工具 → ‘Sources’ 标签页 → 找到对应 JS 文件 → 点击行号左侧空白处打上断点。刷新页面，脚本一执行到这儿就卡住。还能在 Console 里直接输入 debugger，效果等同手动打点：

fetch('/api/user')
  .then(res => res.json())
  .then(data => {
    console.log(data);
    debugger; // 运行到这里自动暂停
    renderProfile(data);
  });

小技巧：别只会点红点

• 想临时禁用断点？点一下红点，它变灰就失效了，不用删掉重来；
• 断点打多了忘了？Ctrl+Shift+F8（Win/Linux）或 Cmd+Shift+F8（Mac）快速打开断点管理面板；
• 调试中想跳过某个函数？用 ‘Step Over’（F10）；想进去看函数内部？按 ‘Step Into’（F11）；
• Python 用 breakpoint()（3.7+ 内置），比写 import pdb; pdb.set_trace() 干净得多。

没装 IDE？命令行也能断

Python 用户可以直接在代码里写：

def login(username, password):
    if not username:
        print('用户名为空')
        breakpoint()  # 运行到这里会进 pdb 交互界面
    verify_user(username, password)

保存后终端运行 python script.py，控制台立刻变成调试模式，输入 p username 就能打印变量，c 继续执行。

断点不是万能，但真香

有人习惯狂打 print，改一行 print 删一行，最后满屏日志还找不到关键值；有人死磕报错堆栈，从第 27 行往上翻 5 层调用……其实，花 10 秒打个断点，比反复改代码、重启服务、猜逻辑快得多。下次卡在某个 if 分支不走、某个数组长度不对、某个 API 返回空数据时，别急着重写，先点一下左边空白处试试。

代码断点怎么设置？手把手教你几种常用方法