调试基础 #

┌─────────────────────────────────────────────────────────────┐
│                     调试界面布局                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                                                     │   │
│  │                   代码编辑区                         │   │
│  │                                                     │   │
│  │   → let result = calculate(a, b);  // 断点          │   │
│  │                                                     │   │
│  └─────────────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────────────┐   │
│  │  变量 │ 监视 │ 调用堆栈 │ 断点                       │   │
│  ├─────────────────────────────────────────────────────┤   │
│  │  result: 42                                         │   │
│  │  a: 10                                              │   │
│  │  b: 32                                              │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/index.js"
        }
    ]
}

1. 普通断点：程序在此暂停
2. 条件断点：满足条件时暂停
3. 日志点：输出消息但不暂停
4. 命中计数断点：执行指定次数后暂停

1. 右键点击行号
2. 选择 "添加条件断点"
3. 输入条件表达式
4. 当条件为 true 时暂停

示例：
• i > 10
• user.name === 'Alice'
• count % 2 === 0

function calculate(a, b) {
    let result = a + b;  // ← 断点在这里
    return result;
}

let sum = calculate(10, 20);  // ← F10 跳过，F11 进入
console.log(sum);

变量面板显示：
• 局部变量
• 全局变量
• 闭包变量

展开对象可以查看属性值

添加监视表达式：
• user.name
• items.length
• calculateTotal()
• a + b

实时显示表达式的值

调用堆栈显示函数调用顺序：

calculate (index.js:10)
↳ processOrder (index.js:25)
  ↳ main (index.js:50)
    ↳ <anonymous> (index.js:60)

点击任意帧跳转到对应代码位置

调试控制台可以：
• 执行表达式
• 查看变量值
• 调用函数

示例：
> user.name
'Alice'

> calculateTotal()
42

> items.filter(i => i.active)

for (let i = 0; i < 100; i++) {
    processItem(items[i]);  // ← 设置条件断点：i > 50
}

// 当 i > 50 时暂停
// 检查 items[51] 的值

async function fetchData() {
    const response = await fetch(url);  // ← 断点
    const data = await response.json(); // ← 断点
    return data;
}

// 使用 F11 进入 async 函数
// 使用 F10 跳过 await

button.addEventListener('click', (event) => {
    handleClick(event);  // ← 断点
});

// 点击按钮触发事件
// 在断点处暂停
// 检查 event 对象

┌─────────────────────────────────────────────────────────────┐
│                     调试流程                                  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  发现问题                                                    │
│     │                                                       │
│     ├─────▶ 设置断点                                         │
│     │        │                                              │
│     │        └─▶ F9 或点击行号                              │
│     │                                                       │
│     ├─────▶ 启动调试                                         │
│     │        │                                              │
│     │        └─▶ F5                                        │
│     │                                                       │
│     ├─────▶ 单步执行                                         │
│     │        │                                              │
│     │        ├─▶ F10 单步跳过                               │
│     │        ├─▶ F11 单步进入                               │
│     │        └─▶ ⇧F11 单步跳出                             │
│     │                                                       │
│     ├─────▶ 查看变量                                         │
│     │        │                                              │
│     │        ├─▶ 鼠标悬停                                   │
│     │        └─▶ 变量面板                                   │
│     │                                                       │
│     └─────▶ 继续执行                                         │
│                │                                            │
│                └─▶ F5                                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

1. 创建一个简单的 JavaScript 文件
2. 设置断点
3. 使用 F5 开始调试
4. 使用 F10 单步执行

1. 创建一个循环
2. 设置条件断点
3. 观察特定条件下的变量值

1. 创建一个包含多个函数的程序
2. 使用 F11 进入函数
3. 使用 ⇧F11 跳出函数
4. 查看调用堆栈