告别console.log，VSCode调试实战

还在靠console.log定位Bug？我以前也这样，直到有一次线上报了一个奇怪的空指针错误，我在代码里加了20多个console.log，打印了满满一屏日志，愣是没找到问题在哪——后来发现是个异步执行顺序的坑，打印顺序跟代码顺序完全不一样。

那一刻我意识到，console.log不仅low，效率还很低。今天分享3个VSCode调试技巧，帮你彻底告别打印大法。

1. 断点才是真香

很多人知道断点，但从来不用。觉得"设置断点太麻烦，不如console.log快"。但实际上，当你需要反复查看不同变量的值时，断点比console.log高效10倍。

基础断点设置：

// 在代码行号左边点击即可设置断点
function fetchUserData(userId) {
  const response = await api.get(`/users/${userId}`); // 在这行打断点
  return response.data;
}

按F5启动调试，代码会在断点处暂停，你可以在左侧面板查看所有局部变量和调用栈。看完之后按F10继续执行，比一次次console.log然后刷新页面快得多。

调试面板常用操作：

• F5：启动调试 / 继续执行
• F10：单步跳过（不进入函数）
• F11：单步进入（进入函数内部）
• Shift+F11：单步退出（跳出当前函数）

2. 变量监听：不用打印也能看

有时候你想持续观察某个变量的变化，但不想在代码里加console.log怎么办？VSCode的"监视"功能了解一下。

在调试面板的"监视"区域，点击+号，输入变量名或表达式。比如：

user.name
response.data.length
arr.filter(x => x > 10).length

只要代码执行到任何地方，这些表达式的值都会实时更新。特别适合调试循环、异步回调等场景。我上次调试一个数组过滤的bug，用监视功能一眼就看到底是哪个条件导致数据丢失的。

3. 条件断点：只停在你想要的地方

循环里想停又不想每次都停？条件断点拯救你。

右键点击断点，选择"编辑条件"，输入一个布尔表达式。只有当表达式为true时，断点才会触发。

比如这段代码：

for (const order of orders) {
  processOrder(order); // 想看order.amount > 1000的情况
}

设置条件断点：order.amount > 1000

这样代码只会暂停在金额大于1000的订单上，省时省力。

常见坑：调试Node.js和浏览器不一样

最后提个醒，调试Node.js后端代码和浏览器前端代码，配置不太一样。

Node.js调试：

• 用VSCode内置的"Node.js"调试配置
• 入口文件设置好就能跑

浏览器调试：

• 建议用VSCode的"Chrome Debugger"插件
• 需要在浏览器和VSCode之间建立连接

两个场景我都整理了launch.json模板，有需要的可以在公众号后台回复"调试"获取。

用好调试工具，不光能省时间，更重要的是能理解代码的真实执行逻辑。console.log只能看到"打印出来的值"，但断点可以让你看到"为什么是这个值"。这才是解决问题的正确姿势。

下次遇到Bug，先别急着加console.log，试着用断点停一停。