在 VS Code 中使用 斷點調(diào)試（debug） 是非常核心的開發(fā)技能，下面我給你完整講一遍，從最基礎(chǔ)到進階功能??

?? 一、基本步驟：設(shè)置斷點與啟動調(diào)試

1?? 打開調(diào)試面板

點擊左側(cè)的 “運行和調(diào)試”圖標(biāo)（快捷鍵：Ctrl + Shift + D / macOS Cmd + Shift + D）

2?? 設(shè)置斷點

在代碼中點擊行號左邊的灰色區(qū)域（或按 F9）
?? 會出現(xiàn)一個紅點（即斷點）

斷點可以放在任何可執(zhí)行的代碼行，比如：

function add(a, b) {
  const result = a + b; // ← 在這里點一下左邊設(shè)置斷點
  return result;
}

add(1, 2);

3?? 啟動調(diào)試

有兩種常見方式：

? 方式一：快速調(diào)試

如果是簡單的腳本（例如 Python、Node.js、C、Dart 等），
直接點擊頂部的 “運行和調(diào)試 ??” 按鈕，VS Code 會自動檢測調(diào)試環(huán)境。

? 方式二：配置 launch.json

更復(fù)雜的項目需要配置啟動項：

1. 點擊調(diào)試面板上方的齒輪 ??

2. 選擇對應(yīng)語言環(huán)境，比如：

   • 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}"  // 調(diào)試當(dāng)前文件
    }
  ]
}

然后點擊綠色 ?? 啟動。

?? 二、調(diào)試時常用操作

?? 三、查看變量與調(diào)用棧

調(diào)試時，VS Code 會出現(xiàn)一個調(diào)試工具欄和側(cè)邊欄：

• 變量（Variables）：顯示當(dāng)前作用域內(nèi)的變量值
• 監(jiān)視（Watch）：可以添加你想實時查看的變量表達(dá)式
• 調(diào)用堆棧（Call Stack）：查看當(dāng)前函數(shù)調(diào)用鏈
• 斷點（Breakpoints）：管理所有斷點，支持條件斷點和日志斷點

?? 四、進階技巧

?? 條件斷點

右鍵點擊斷點 → “編輯斷點” → 設(shè)置條件
例如：

i === 5

程序執(zhí)行到 i=5 時才會停。

?? 日志斷點（Logpoint）

右鍵斷點 → “添加日志斷點”
輸入：

i 的值是：{i}

這不會暫停程序，只會在控制臺輸出調(diào)試信息（很像 console.log）。

?? 熱重載調(diào)試（Flutter / React / Vue）

對于 Flutter、React、Vue 等框架，VS Code 都支持「熱重載」：

• 改代碼后無需重新啟動調(diào)試
• 使用 Ctrl + S（保存） 即自動更新運行中的 App

?? 五、各語言調(diào)試示例

要我根據(jù)你正在用的語言（例如：Dart / Flutter / Node / Vue / Python）
給你示范具體的 launch.json 調(diào)試配置嗎？