vscode 调试

在 VS Code 中使用 断点调试（debug） 是非常核心的开发技能，下面我给你完整讲一遍，从最基础到进阶功能👇

🧩 一、基本步骤：设置断点与启动调试

1️⃣ 打开调试面板

点击左侧的 “运行和调试”图标（快捷键：Ctrl + Shift + D / macOS Cmd + Shift + D）

2️⃣ 设置断点

在代码中点击行号左边的灰色区域（或按 F9）
👉 会出现一个红点（即断点）

断点可以放在任何可执行的代码行，比如：

function add(a, b) {
  const result = a + b; // ← 在这里点一下左边设置断点
  return result;
}

add(1, 2);

3️⃣ 启动调试

有两种常见方式：

✅ 方式一：快速调试

如果是简单的脚本（例如 Python、Node.js、C、Dart 等），
直接点击顶部的 “运行和调试 ▶️” 按钮，VS Code 会自动检测调试环境。

✅ 方式二：配置 launch.json

更复杂的项目需要配置启动项：

1. 点击调试面板上方的齿轮 ⚙️

2. 选择对应语言环境，比如：

   • Node.js
   • Python
   • Flutter
   • C/C++
   • Dart 等等

3. VS Code 会生成 .vscode/launch.json 文件

例如 Node.js 的配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "program": "${file}"  // 调试当前文件
    }
  ]
}

然后点击绿色 ▶️ 启动。

🧭 二、调试时常用操作

🧮 三、查看变量与调用栈

调试时，VS Code 会出现一个调试工具栏和侧边栏：

• 变量（Variables）：显示当前作用域内的变量值
• 监视（Watch）：可以添加你想实时查看的变量表达式
• 调用堆栈（Call Stack）：查看当前函数调用链
• 断点（Breakpoints）：管理所有断点，支持条件断点和日志断点

🧠 四、进阶技巧

✳️ 条件断点

右键点击断点 → “编辑断点” → 设置条件
例如：

i === 5

程序执行到 i=5 时才会停。

🧾 日志断点（Logpoint）

右键断点 → “添加日志断点”
输入：

i 的值是：{i}

这不会暂停程序，只会在控制台输出调试信息（很像 console.log）。

🧩 热重载调试（Flutter / React / Vue）

对于 Flutter、React、Vue 等框架，VS Code 都支持「热重载」：

• 改代码后无需重新启动调试
• 使用 Ctrl + S（保存） 即自动更新运行中的 App

💡 五、各语言调试示例

要我根据你正在用的语言（例如：Dart / Flutter / Node / Vue / Python）
给你示范具体的 launch.json 调试配置吗？