f5启动调试需先配置launch.json,f9设断点、f10跳过、f11进入函数构成单步调试闭环;cmd+shift+y切换调试控制台,ctrl+`切换终端,左下角状态栏和调试侧边栏可快速定位调试异常。

直接按 F5 就能进调试模式,但前提是得有可运行的配置
VSCode 不是点一下 F5 就自动跑起任意代码的——它需要知道“用什么环境、怎么启动、加载哪些参数”。这个信息存在工作区根目录下的 .vscode/launch.json 里。如果你第一次按 F5,VSCode 会弹窗问你选什么环境(Node.js、Python、Chrome 等),选完就自动生成基础配置。
常见踩坑点:
- 没生成
launch.json就反复按 F5,只会看到“无法启动调试”的提示,不是快捷键失效 - 项目里有多个
package.json或main.py,VSCode 可能默认选错入口文件,得手动改launch.json里的program或module字段 - TypeScript 项目必须先编译出
.js文件,或在launch.json里加"preLaunchTask": "tsc: build - tsconfig.json",否则断点不命中
F9 设断点、F10 跳过、F11 进入函数:三键闭环控制执行流
调试的核心不是“跑起来”,而是“在哪停、怎么走、看到什么”。这三键构成最常用的单步控制链:
-
F9:点一下当前行号左侧空白处,出现红点即设好断点;再点一次红点消失,取消断点。不依赖鼠标悬停菜单,也不用右键 -
F10:单步跳过(Step Over)。执行当前行,如果这行调用了函数,不会进入函数内部,而是直接执行完并停在下一行 -
F11:单步进入(Step Into)。遇到函数调用就钻进去,光标跳转到函数第一行;但如果函数来自node_modules或压缩代码,可能跳不过去——这时得确认是否开启了"skipFiles"配置
注意:F10 和 F11 在调试会话未启动时无效,必须先按 F5 启动,且当前处于暂停状态才能响应。
Cmd+Shift+Y 和 Ctrl+` 切换面板,别让调试器和终端互相遮挡
调试时经常要一边看变量值,一边敲命令验证逻辑,但 VSCode 默认只显示一个底部面板。这时候:
-
Cmd + Shift + Y(macOS)或Ctrl + Shift + Y(Windows/Linux):快速显示/隐藏「调试控制台」,里面能看到console.log输出、表达式求值结果、错误堆栈 -
Ctrl + `(所有平台):显示/隐藏集成终端。注意它只是切换显隐,不是新建实例 -
Ctrl + Shift + `(所有平台):在终端面板内新建一个 shell 标签页,比如一个跑npm run dev,另一个跑curl http://localhost:3000/api/test,互不阻塞
容易被忽略的是:调试控制台里输入 JavaScript 表达式(如 user.name)能实时取值,比反复 hover 变量更直接;而终端里按 ↑ 键仍可调出历史命令,清屏(Cmd + K)不影响这个行为。
调试失败时先看左下角状态栏和调试侧边栏图标
很多问题根本不用翻日志,一眼就能定位:
- 左下角状态栏出现红色
DEBUG字样,说明调试进程已崩溃退出;如果是灰色RUNNING,说明还在跑但没停在断点上 - 调试侧边栏顶部的「变量(VARIABLES)」、「监视(WATCH)」、「调用堆栈(CALL STACK)」如果全为空白,大概率是没触发断点——检查是否在源码映射(source map)没生效的文件里打了断点,比如
dist/*.js但没配"sourceMaps": true - 点击调试侧边栏右上角齿轮图标打开
launch.json,重点核对type(如node、pwa-node、python)是否和实际运行环境一致;request是launch还是attach,决定了是“自己起进程”还是“连已有进程”
真正卡住的往往不是快捷键记不住,而是把 F5 当万能键,忽略了调试配置和运行时环境之间的耦合关系。











