vscode调试核心是设断点和启调试:在行号旁单击设断点,支持多断点、临时禁用、条件断点和日志断点;通过launch.json配置type、request、program等参数;按F5启动,用F10/F11/Shift+F11等快捷键控制执行流程。

在 VSCode 中调试代码,核心就是两步:设断点、启调试。只要环境配好,操作非常直观。
设置断点
断点是你让程序暂停执行的位置,方便你检查变量、调用栈和执行流程。最常用的方式是在代码行号左侧的空白区域单击——出现一个红色实心圆点即表示断点已生效。
- 支持多断点:可以在不同行、多个文件中同时设置
- 临时禁用:点击已设的断点(红点变空心)可暂时跳过,无需删除再加
- 条件断点:右键断点 → “编辑断点”,输入表达式如 count > 10,满足时才中断
- 日志断点:同样右键 → “编辑断点”,勾选“日志消息”,输入类似 当前值: ${value},运行时不中断,只输出信息
配置 launch.json 启动调试
VSCode 需要知道怎么运行你的代码,这靠 .vscode/launch.json 文件定义。首次调试时,VSCode 通常会引导你自动生成;若没有,按 Ctrl+Shift+P(win/linux)或 Cmd+Shift+P(mac),输入 “Debug: Open launch.json”,选择对应环境(如 node.js、python、chrome 等)。
- type:调试器类型,如 node、python、pwa-chrome
- request:一般为 launch(启动新进程)或 attach(接入已有进程)
- program:入口文件路径,如 “${file}” 表示当前打开的文件
- console:推荐设为 integratedTerminal,便于看到输出和交互
启动并控制调试会话
按 F5 启动调试,VSCode 会自动读取 launch.json 并运行。一旦触发断点,界面会进入调试模式:代码高亮暂停行、左侧弹出调试面板(变量、监视、调用栈、断点列表)。
- F10:逐过程(Step Over),执行当前行,不进入函数内部
- F11:逐语句(Step Into),进入函数内部第一行(支持源码时)
- Shift+F11:跳出(Step Out),执行完当前函数并返回上层
- F9:切换当前行断点开关
- 调试面板顶部有重启、停止、继续按钮,也可用快捷键 Ctrl+Shift+F5 重启
基本上就这些。环境配对、断点设准、快捷键记熟,调试就顺了。