欢迎来到bug猎人的训练营！调试就像破案，需要逻辑思维和敏锐直觉；测试则是预防犯罪的巡逻机制。让我们学习如何系统性地排查和预防代码中的问题。

15.1 调试技巧进阶 - 超越console.log

Chrome DevTools高级技巧

// 1. 条件断点
function processOrder(order) {
  // 右键行号添加条件断点：order.total > 1000
  calculateDiscount(order);
  applyTax(order);
}

// 2. 日志点（不暂停执行）
// 在代码行号右键选择"Add logpoint"
// 输入：`Processing item: ${order.id}`

// 3. 黑盒脚本（忽略第三方库代码）
// 在Sources面板右键脚本选择"Blackbox script"

// 4. 性能分析
console.time("数据加载");
await loadData();
console.timeEnd("数据加载"); // 控制台输出执行时间

错误追踪策略

// 错误边界（React示例）
class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    sendErrorToServer(error, info);
    logError(error, info.componentStack);
  }
  render() { /*...*/ }
}

// 全局错误处理
window.addEventListener('error', (event) => {
  trackError(event.error);
});

window.addEventListener('unhandledrejection', (event) => {
  trackError(event.reason);
});

15.2 单元测试入门 - 代码的安全网

Jest测试框架基础

// math.js
export function add(a, b) {
  return a + b;
}

// math.test.js
import { add } from './math';

describe('加法函数', () => {
  test('正常数字相加', () => {
    expect(add(1, 2)).toBe(3);
  });

  test('字符串数字相加', () => {
    expect(add('1', '2')).toBe(3); // 测试会失败！
  });

  test('参数缺失', () => {
    expect(() => add(1)).toThrow('需要两个参数');
  });
});

测试覆盖率报告

# 运行测试并生成覆盖率报告
npx jest --coverage

# 典型输出
# ----------|---------|----------|---------|---------
# File      | % Stmts | % Branch | % Funcs | % Lines
# ----------|---------|----------|---------|---------
# math.js   |   100   |    50    |   100   |   100

15.3 常见错误处理 - 错误类型大全

JavaScript错误类型速查表

防御性编程示例

function safeParseJSON(json) {
  try {
    return {
      success: true,
      data: JSON.parse(json)
    };
  } catch (err) {
    return {
      success: false,
      error: err.message
    };
  }
}

// 使用
const result = safeParseJSON('{"invalid": json}');
if (!result.success) {
  showError(result.error);
}

本章总结：

1. 掌握DevTools高级调试功能
2. 实施系统化错误追踪
3. 编写有效的单元测试
4. 识别常见错误类型
5. 采用防御性编程策略

调试工具推荐：

• Chrome DevTools
• VS Code调试器
• React/Redux DevTools
• Vue DevTools
• Postman (API调试)

实战练习：

1. 为之前项目添加错误边界
2. 编写一个工具函数的测试套件
3. 分析并修复一个内存泄漏案例
4. 实现一个网络请求重试机制

错误处理检查清单：

- [ ] 关键操作添加try/catch
- [ ] 全局错误处理器已配置
- [ ] Promise错误有catch处理
- [ ] 输入参数验证
- [ ] 错误日志记录系统
- [ ] 友好的用户错误提示
- [ ] 测试覆盖主要错误场景

下一章我们将探索JavaScript生态体系，了解现代前端开发的完整工具链！准备好扩展你的技术视野了吗？