VSCode调试工具怎么用 - 手把手教你高效排查代码问题

写代码时总免不了出点小问题，光靠眼睛看可不容易找出来。这时候，VSCode自带的调试工具就派上大用场了。不用装额外软件，点几下就能看到变量值、一步步执行代码，就像给程序装了慢放镜头。

先配个调试环境

打开你的项目文件夹，在VSCode左边栏点那个“虫子”图标（调试），再点上方的“创建 launch.json 文件”。它会问你用什么环境，比如Node.js、Python或者Chrome浏览器。选对了才能正常调试。

比如你是写Node.js脚本，选“Node.js”后会自动生成一个 launch.json 文件，内容大概是这样：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

这里面的 program 指的是你要运行的主文件。如果你的入口文件叫 index.js，那就改成对应的路径。

打断点，开始调试

找到你想检查的代码行，在行号左边点一下，会出现一个红点，这就是断点。比如你在某一行输出用户信息，想看看那时候变量长什么样，就在那行加断点。

然后按F5，或者点绿色三角箭头，程序就会跑起来，跑到断点处自动停下来。这时候你可以把鼠标悬停在变量上，立刻看到它的当前值。

控制台里也能操作

停在断点时，右边会显示“局部变量”“调用堆栈”这些信息。你还可以在“调试控制台”里直接输入变量名，甚至调用函数，实时测试逻辑有没有问题。

比如你有个 calcTotal(price, tax) 函数，可以在控制台输入 calcTotal(100, 0.1)，马上看到返回结果是不是110。

一步步走，不怕漏细节

程序停住后，可以用顶部的按钮控制执行流程： “继续”是跳到下一个断点，“单步跳过”是逐行执行，“单步进入”能钻进函数里面看细节，“单步跳出”则是从函数里跳回来。

举个例子，你调用了一个 handleUserData() 函数，但结果不对。点“单步进入”，就能一层层看它是怎么处理数据的，哪一步出了偏差一眼就能发现。

改完代码不用重来

调试中途你发现一个小错，比如拼错了变量名，可以直接在编辑器里改。保存后重新启动调试（Ctrl+Shift+F5），新代码立刻生效，不用退出再进来。

其他常见场景

如果是前端页面调试，可以用“Debugger for Chrome”插件，配置好后点F5直接在浏览器打开页面，同时能调试JS代码。Vue或React项目也一样适用。

Python用户也别担心，装好Python扩展后，同样可以设断点、看变量、一步步执行。只要 launch.json 配的是 "python" 类型就行。