Vscode Debug 技巧
看到这个提示说明你的 Node.js 程序已经开启了调试模式Inspector Protocol并在9229端口监听调试连接。你可以通过以下两种最主流的方法连接并开始调试方法一使用 Chrome 浏览器调试无需安装额外插件最快在 Chrome 浏览器地址栏输入并打开chrome://inspect确保“Discover network targets”选项处于勾选状态默认会包含localhost:9229。在Remote Target列表中你会看到当前运行的 Node.js 进程。点击进程下方的inspect链接。弹出一个独立的 Chrome DevTools 窗口你可以在Sources标签页打断点、查看变量和单步执行代码。方法二使用 VS Code 编辑器调试推荐体验最好方式 A自动附加Auto Attach打开 VS Code 终端Ctrl ~或Cmd ~。按Cmd Shift P(Mac) 或Ctrl Shift P(Windows)搜索并选择Debug: Toggle Auto Attach。选择With Flag或Always。在终端中重新运行启动命令VS Code 会自动捕获并连接调试器直接在代码左侧点红点即可打断点。方式 B配置launch.json固定附加到 9229 端口如果你希望按F5一键连接调试可以在项目根目录创建.vscode/launch.json文件JSON{ version: 0.2.0, configurations: [ { type: node, request: attach, name: Attach to Node (9229), port: 9229, restart: true, sourceMaps: true } ] }配置完成后按F5即可连接正在运行的进程。调试控制快捷键操作快捷键用途启动继续F5运行到下一个断点暂停F5对应工具栏按钮暂停正在执行的程序单步跳过 Step OverF10执行当前行但不进入调用的方法单步进入 Step IntoF11进入当前行调用的方法单步跳出 Step OutShiftF11执行完当前方法并返回调用者重启macOSShiftCmdF5Win/LinuxCtrlShiftF5使用当前配置重新调试停止ShiftF5结束调试普通断点F9设置或取消当前行断点行内断点ShiftF9在一行内的指定表达式处暂停调试控制台macOSShiftCmdYWin/LinuxCtrlShiftY执行表达式、查看输出调试工具栏的位置可以通过debug.toolBarLocation调整。断点技巧普通断点点击行号左侧空白区域或者把光标放到目标行后按F9。断点状态红色实心圆已启用。灰色实心圆已禁用。灰色空心圆调试器没有成功绑定该断点常见于源码映射失败、文件在调试时被修改或当前行不可执行。{// 在编辑器右侧概览标尺中显示断点。debug.showBreakpointsInOverviewRuler:true,// 断点很多时可把列表按文件分组debug.breakpointsView.presentation:tree}条件断点只在条件成立时暂停适合循环和特定输入user.idtargetId;添加方式右键行号左侧断点区域 →Add Conditional Breakpoint。条件断点可以使用表达式条件表达式为true时暂停。命中次数第 N 次经过时暂停。触发条件等另一个断点被命中后再启用。命中次数的具体语法由调试扩展决定。触发断点Triggered Breakpoint 在另一个断点被命中后才生效。典型场景在“状态开始异常”的地方设置断点 A。在“最终崩溃”的位置设置触发断点 B。让 B 由 A 激活。这样可以过滤程序初始化阶段或正常请求中的大量无关命中。行内断点一行包含多个表达式时普通断点无法精确判断暂停位置例如constresultusers.map((x)normalize(x)).filter((x)x.active);调试期间按ShiftF9可以在normalize()或filter()对应列位置设置行内断点。特别适合压缩后的 JavaScript。链式调用。一行内多个函数调用。Lambda箭头函数表达式。函数断点不知道函数在哪个文件、没有源代码或者函数由运行时动态加载时可以按函数名暂停打开BREAKPOINTS面板。点击标题栏中的。输入函数名。是否支持以及函数名称格式取决于调试扩展。数据断点数据断点不是“执行到某一行暂停”而是变量发生特定访问时暂停。在VARIABLES面板右键变量可选择Break on Value Change值发生变化。Break on Read读取变量。Break on Access读取或写入。适合查找“是谁修改了这个值”对象状态为何莫名改变。缓存或共享状态被哪里覆盖。多线程程序中的意外写入。数据断点需要调试器支持。Logpoint 日志断点Logpoint 输出日志但不暂停程序适合高频代码、线上复现和不方便修改源代码的场景。右键行号左侧 →Add Logpoint例如用户ID{user.id},当前状态{user.status}花括号里的表达式会被求值。Logpoint 还可以配合条件和命中次数使用。优点不需要临时插入、删除console.log。不会污染代码或产生意外提交。不会因为暂停程序改变时序。可以快速观察循环或请求的运行轨迹。{// 可配置鼠标中键快速切换 Logpointdebug.gutterMiddleClickAction:logpoint}以上断点类型及其限制见官方 Breakpoints 说明。查看和修改运行时数据VARIABLES变量值相对于当前选中的调用栈帧显示。切换CALL STACK中的栈帧会看到该层函数对应的局部变量。常用操作鼠标悬停变量快速查看值。Set Value调试期间直接修改变量。Copy Value复制当前值。Copy as Expression复制访问该变量所需的完整表达式。在 VARIABLES 面板按 macOSOptionCmdF、Win/LinuxCtrlAltF按名称或值过滤变量。修改运行时变量可以快速验证假设例如把权限状态、返回值或计数器临时改成某个值而不必改代码并重新运行。WATCH把关键表达式放入监视列表例如cart.items.length user?.permissions.includes(admin) JSON.stringify(request.body) currentIndex records.length - 1技巧监视“业务条件”不只是单个变量。使用Copy as Expression生成嵌套对象的访问表达式。注意表达式相对于当前栈帧求值。避免执行有副作用的函数否则查看变量可能改变程序状态。CALL STACK调用栈可以用来查看程序经过了哪些函数。切换到上层调用者。理解错误是在哪里产生、又在哪里暴露的。在多线程或多进程调试中切换执行上下文。遇到异常时不要只看当前抛错行通常应该沿调用栈向上检查第一个属于自己业务代码的栈帧。launch.json 配置技巧{version:0.2.0,configurations:[{type:node,request:launch,name:Launch Program,program:${workspaceFolder}/app.js,cwd:${workspaceFolder}}]}type调试器类型如node、python、go。requestlaunch或attach。name配置在调试下拉菜单中的名称。字段用途program要运行的入口文件或程序args命令行参数cwd工作目录env环境变量envFiledotenv 环境变量文件portAttach 时使用的端口stopOnEntry启动后立即暂停console使用调试控制台、集成终端或外部终端preLaunchTask调试前运行构建等任务postDebugTask调试结束后运行清理任务internalConsoleOptions控制调试控制台是否显示serverReadyAction服务启动后自动打开或调试 URLpresentation配置的排序、分组、显示和隐藏在launch.json中按CtrlSpace可以查看当前调试扩展支持的属性。属性出现红色波浪线时应先悬停查看错误不同调试器支持的字段并不相同。官方调试配置参考Launch 与 Attach 的选择Launch由 VS Code 启动程序并自动连接调试器。适合本地开发。启动参数固定。希望一键完成构建、启动和调试。需要通过env、cwd、args控制运行环境。Attach程序已经运行VS Code 只连接到现有进程。适合服务由 Docker、进程管理器或其他命令启动。远程调制。子进程或后台进程。需保留真实启动方式。需要对输入输出做特殊重定向。使用变量避免硬编码路径{program:${workspaceFolder}/src/index.js,cwd:${workspaceFolder},args:[${env:USERNAME},${file}]}${workspaceFolder}当前工作区根目录。${file}当前活动文件。${env:NAME}读取环境变量。${defaultBuildTask}默认构建任务。跨平台配置{type:node,request:launch,name:Launch Program,program:${workspaceFolder}/app.js,args:[data/input.txt],windows:{args:[data\\input.txt]},linux:{args:[data/input.txt]},osx:{stopOnEntry:false}}启动前后自动执行任务{name:Debug App,type:node,request:launch,program:${workspaceFolder}/dist/index.js,preLaunchTask:${defaultBuildTask},postDebugTask:cleanup}服务启动后自动打开页面serverReadyAction可以匹配服务输出中的端口然后自动打开浏览器{type:node,request:launch,name:Launch Server,program:${workspaceFolder}/app.js,serverReadyAction:{pattern:listening on port ([0-9]),uriFormat:http://localhost:%s,action:openExternally}}可用动作包括openExternally在默认浏览器打开。debugWithChrome启动 Chrome 调试。debugWithEdge启动 Edge 调试。startDebugging启动另一个命名调试配置。这是前后端联调时非常实用的自动化能力。多目标调试同一个 VS Code 窗口可以同时调试多个进程例如前端 后端。主进程 子进程。API Worker。服务端 浏览器。启动第二个调试会话后每个会话显示为CALL STACK的顶层节点。工具栏下拉菜单可以切换活动会话。单步、暂停、停止等操作只作用于当前活动会话。Compound 复合配置{version:0.2.0,configurations:[{name:Server,type:node,request:launch,program:${workspaceFolder}/server.js},{name:Client,type:node,request:launch,program:${workspaceFolder}/client.js}],compounds:[{name:Server Client,configurations:[Server,Client],preLaunchTask:${defaultBuildTask},stopAll:true}]}远程调试远程调试能力主要由具体调试扩展提供不能假设所有语言都支持相同配置。常见场景SSH 远程主机。WSL。Dev Containers。Docker 容器。Codespaces。连接远程运行的服务进程。一般要检查远程进程是否以调试模式启动。调试端口是否监听。网络、容器端口或 SSH 隧道是否可达。本地源码路径与远程路径是否正确映射。编译语言或 TypeScript 的 Source Map 是否正确。Node.js 是一个例外VS Code 自带的 Node 调试器直接支持远程调试其他语言应查对应扩展说明。JavaScriptNode.js 专属技巧VS Code 内置 Node.js 调试能力还提供几种快捷工作流Node.js 调试官方文档Auto Attach执行命令面板中的Toggle Auto Attach之后从 VS Code 集成终端启动 Node.js 程序时可以自动连接调试器。模式smart调试项目脚本和常见运行器通常跳过node_modules。always连接集成终端启动的所有 Node.js 进程。onlyWithFlag仅连接带--inspect或--inspect-brk的进程。JavaScript Debug Terminal创建 JavaScript Debug Terminal在该终端中执行 Node、npm、pnpm、测试命令时会自动启用调试。pnpmtestpnpmdevnodescripts/import.js跳过无关代码Node 配置中可以使用{skipFiles:[node_internals/**,${workspaceFolder}/node_modules/**]}