VSCode调试工具怎么用？前端开发者的实用指南

写代码免不了出错，尤其是在搭建网站时，JavaScript、Node.js 或前端框架一跑起来，控制台一堆报错，看得人头大。这时候，VSCode自带的调试工具就能派上大用场。不用再靠 console.log 满天飞，点几下就能查看变量、单步执行，效率高不少。

先配个最简单的调试环境

假设你正在本地写一个 Node.js 脚本，比如叫 app.js，内容如下：

const names = ['小明', '小红', '小刚'];

function greet(name) {
    return `Hello, ${name}!`;
}

names.forEach(greet);

想看看每次调用 greet 时传进来的 name 是啥，可以直接在 VSCode 左侧边栏点那个“虫子”图标（调试），然后点“创建 launch.json 文件”，选择 Node.js 环境。VSCode 会生成一个配置文件，内容大概长这样：

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

打断点，开始调试

回到 app.js，在 return `Hello, ${name}!`; 这一行的行号左侧点一下，出现一个红点，这就是断点。按 F5 启动调试，程序运行到这一行就会停下来。

这时右边会显示当前作用域里的变量，比如 name 的值是“小明”。你可以按 F10 单步跳过，F11 进入函数内部（虽然这里没嵌套），看着变量一步步变化，比反复打印清晰多了。

调试浏览器中的网页也一样方便

如果你在搭网站，前端代码跑在浏览器里，也可以用 VSCode 调试。配合 Chrome Debugger 插件，能直接在 VSCode 里调试页面 JS。

先装个插件叫 “Debugger for Chrome”，然后在 launch.json 里加一段配置：

{
  "type": "chrome",
  "request": "launch",
  "name": "打开 localhost",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

保存后，选中这个配置，按 F5，VSCode 会自动打开 Chrome 访问你的本地站点，并连接调试器。你在 VSCode 里打的断点，页面一刷新就会停住。

实际场景：修一个奇怪的空值错误

有次我写了个表单提交函数，总在某个字段报 Cannot read property of undefined。以前我会到处塞 console.log，现在直接打个断点进去，一看就知道是接口返回的数据结构变了，某个嵌套字段没做判断。

调试窗口里展开 response.data，发现原本该有的 user 对象变成了 null。问题立马定位，补个默认值就解决了。

一些实用小技巧

调试时鼠标悬停在变量上，能直接看到它的值，不用专门加到监视面板。想看复杂表达式，可以在“监视”面板手动输入，比如 users.filter(u => u.active)，实时查看结果。

如果不想每次都从头跑，可以右键断点选“编辑断点”，设置条件，比如只有 name === '小红' 才暂停，省得一步步点过去。

调试工具不是高手专属，写网站时随手用起来，查问题快得多。别等堆成大坑才翻日志，从一个简单的断点开始试试就行。