VSCode断点设置技巧，调试代码更高效

写代码时，总免不了遇到问题。比如网页连不上后端，数据传输出错，这时候光靠眼睛看代码很难发现问题在哪。在日常开发中，用VSCode设置断点来一步步排查，是个特别实用的招儿。

怎么在VSCode里加断点？

操作很简单。打开你的代码文件，找到想检查的那一行，在行号左边点一下，就会出现一个红点，这就是断点了。比如你怀疑某个变量在第15行出了问题，就在那行加个断点，运行调试模式时，程序会自动停在这儿。

启动调试别搞错配置

光设断点没用，得配合调试运行。按F5启动调试前，先确认launch.json配置对了。如果是Node.js项目，可以这样写：

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

保存之后按F5，代码跑到断点就会暂停。这时候鼠标移到变量上，能直接看到当前的值，比console.log方便多了。

条件断点更精准

有时候循环跑上千次，只在某一次出问题。一个个过太麻烦。右键点击断点，选“编辑断点”，输入条件，比如 i === 99，就只在第99次停下来，省时间。

实际场景：查接口数据异常

有次做无线组网的配置页面，前端一直收不到设备列表。我在请求回调那里加了个断点，一调试发现数据其实收到了，但被误判为null。原来是后端字段名改了，前端还在按旧名字取值。断点一打，问题立马暴露。

小技巧别忽略

断点可以临时禁用，点一下红点变黄就行，不用删掉重设。多个断点之间用F10逐行过，F11能跳进函数里面看细节。这些操作熟了之后，修bug速度明显快起来。