vscode断点通过点击行号左侧灰色区域设置，支持条件断点和日志断点；条件断点需右键编辑合法布尔表达式，日志断点用模板字符串输出信息而不暂停执行；常见失效原因包括热更新覆盖、sourcemaps未启用或异步上下文未进入。
断点设置：点击行号左侧灰色区域即可
VSCode 的断点是图形化操作，不需要写代码。在 JavaScript、Python、TypeScript 等支持调试的语言中，直接点击编辑器左侧的行号边栏（灰色空区），出现实心红点即表示断点已设好。debugger 语句也能触发断点，但属于硬编码，上线前容易遗漏或忘记删，不推荐作为主要手段。
注意：断点只在启动调试会话（Ctrl+Shift+D → 点击绿色三角）后生效；普通运行（Ctrl+F5 或终端执行）不会停住。
条件断点：右键红点 → “Edit Breakpoint” → 输入表达式
右键已设好的断点红点，选择 Edit Breakpoint，弹出输入框后填写 JS 表达式（Python 调试器同理，但语法需匹配对应语言）。例如：
-
user.id === 123—— 仅当 user 对象存在且 id 为 123 时中断 -
items.length > 10—— 列表超长时才停 -
error && error.message.includes("timeout")—— 捕获特定错误信息
条件表达式必须是能求值为 true 或 false 的合法表达式；若语法错误，断点会变成半透明红点，悬停提示“Invalid condition”。此时需检查括号、引号、变量名拼写（比如误写成 useer）。
日志断点：替代 console.log，不打断执行流
右键断点 → Edit Breakpoint → 选择 Log Message，输入类似 User loaded: ${user.name} 的模板字符串。它会在控制台输出内容，但不会暂停代码——适合高频调用场景，避免反复手动点“继续”。
注意：${...} 中只能访问当前作用域变量，不能调用函数（如 ${getUser().id} 会报错）；若需复杂计算，先赋值给临时变量再引用。
条件调试常见失效原因
断点打了却从不停？多数不是配置问题，而是环境或时机不对：
- 代码被热更新（如 React Fast Refresh、Vite HMR）覆盖，旧断点失效 → 保存文件后重新加载页面再试
- 源码映射未生效（尤其 TypeScript/webpack 项目）→ 检查
launch.json中sourceMaps设为true，且编译产物含.map文件 - 异步逻辑（如
setTimeout、Promise.then）中设断点，但调试器未进入该回调上下文 → 改用debugger+await配合，或确保断点落在实际执行路径上 - Node.js 版本过低（
条件表达式里访问未定义变量不会报错，而是整个条件视为 false，这点容易误判为“条件没起作用”，其实只是变量根本不存在。调试时优先在断点暂停后打开 Debug Console 手动查变量是否存在。
