调试程序 · Debug
📌 一句话理解
调试就是“找Bug、修Bug”：程序出问题了，你像侦探一样找出原因，然后修复它。
🐛 什么是调试？
调试（Debug） 是指发现和修复计算机程序错误的过程。程序员写代码不可能一次就完美，调试是编程中必不可少的一步。
┌─────────────────────────────────────────────────────────────────┐
│ 调试 = 找Bug + 修Bug │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 写代码 │ ──► │ 运行 │ ──► │ 出问题 │ │
│ │ │ │ 程序 │ │ (Bug) │ │
│ └─────────┘ └─────────┘ └────┬────┘ │
│ │ │
│ ▼ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 继续写 │ ◄── │ 修复 │ ◄── │ 定位 │ │
│ │ 代码 │ │ 问题 │ │ 原因 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ 调试工具帮助你一步步找出问题在哪里 │
│ │
└─────────────────────────────────────────────────────────────────┘
🔧 调试程序能做什么？
| 功能 | 说明 | 类比 |
|---|---|---|
| 设置断点 | 让程序停在某一行，别往下跑 | 按暂停键 |
| 单步执行 | 一行一行慢慢执行代码 | 慢动作回放 |
| 查看变量 | 看某个变量当前的值是多少 | 查体温 |
| 修改变量 | 临时改个值，看看效果 | 换药试试 |
| 调用栈 | 看程序是怎么一步步走到这里的 | 看行动路线 |
┌─────────────────────────────────────────────────────────────────┐
│ 断点调试示意 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 代码： │
│ │
│ 1 let total = 0; │
│ 2 for(let i=1; i<=100; i++){ │
│ 3 total = total + i; ← 🔴 断点设在这里 │
│ 4 } │
│ 5 console.log(total); │
│ │
│ 程序运行到第3行会暂停，你可以看： │
│ • 此时 i 等于多少？ │
│ • 此时 total 等于多少？ │
│ • 循环进行到第几次了？ │
│ │
│ 如果发现 total 的值不对，就知道问题在哪 │
│ │
└─────────────────────────────────────────────────────────────────┘
🐞 Bug 这个词是怎么来的？
| 时间 | 事件 |
|---|---|
| 1947年 | 哈佛大学马克二号计算机出故障 |
| 原因 | 技术人员发现一只飞蛾卡在继电器里 |
| 结果 | 把飞蛾取出后，机器恢复正常 |
| 影响 | 从此，计算机错误被称为 Bug（虫子） |
| 排除错误 | 被称为 Debug（除虫） |
┌─────────────────────────────────────────────────────────────────┐
│ 第一个Bug │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 操作日志原文： │ │
│ │ “First actual case of bug being found.” │ │
│ │ （发现第一个真实的Bug案例） │ │
│ │ │ │
│ │ 那只飞蛾被贴在日志本上，现在还在华盛顿博物馆 │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ 这就是“Bug”的由来！ │
│ │
└─────────────────────────────────────────────────────────────────┘
💡 小提示：现在程序员还是把程序错误叫“Bug”，修复叫“Debug”。
🛠️ 常见的调试工具
| 工具/环境 | 怎么用 |
|---|---|
| 浏览器开发者工具 | 按F12打开，调试网页JavaScript |
| VS Code | 编程软件自带的调试功能 |
| Python Debugger | Python语言自带的调试模块 |
| Chrome DevTools | 前端程序员最常用的调试工具 |
🏠 生活中的调试类比
| 场景 | 类比到调试 |
|---|---|
| 数学题做错了 | 一步步检查计算过程，找出哪一步错了 |
| 家里灯不亮 | 检查灯泡、开关、电闸，找到问题原因 |
| 菜做咸了 | 回忆放了哪些调料，下次少放盐 |
| 组装家具出错 | 看说明书，检查哪一步装反了 |
🔄 调试的基本步骤
┌─────────────────────────────────────────────────────────────────┐
│ 调试五步法 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ① 复现问题 │
│ └─► 让Bug稳定出现（“每次点这个按钮都会闪退”） │
│ │
│ ② 定位问题 │
│ └─► 用断点、日志缩小范围（“问题出在这个函数里”） │
│ │
│ ③ 分析原因 │
│ └─► 找出根本原因（“这里变量是null，不应该调用方法”） │
│ │
│ ④ 修复问题 │
│ └─► 改代码（“加个判断，如果变量是null就不调用”） │
│ │
│ ⑤ 验证修复 │
│ └─► 再测试，确认Bug真的没了 │
│ │
└─────────────────────────────────────────────────────────────────┘
✅ 自测小问题
- 调试（Debug）是什么意思？
- “Bug”这个词是怎么来的？
- 调试程序能帮你做什么？
点击查看答案
- 发现和修复计算机程序错误的过程
- 1947年，一只飞蛾卡在计算机继电器里导致故障，从此把程序错误叫Bug（虫子）
- 设置断点、单步执行、查看变量、修改变量、查看调用栈等
📚 教材链接
- 教材位置：第二章 2.1.2 信息系统的组成