如何区分Bug是前端问题还是后端问题？

在软件测试中，精准定位Bug的归属（前端 or 后端）是高效协作的关键。以下是系统化的排查方法，结合技术细节和实战技巧：

---

1. 核心判断逻辑

「数据 vs 展示」二分法：

• 后端问题：数据本身错误（API返回错误数据/逻辑错误/数据库问题）

• 前端问题：数据正确但展示异常（UI渲染错误/交互逻辑问题）

---

2. 四步定位法

第一步：抓包分析（必做）

• 工具：Chrome DevTools > Network / Fiddler / Charles

• 关键检查：

  json

  // 后端问题特征
  {
    "status": 500,  // 服务器错误
    "data": null    // 数据缺失或明显错误
  }

  json

  // 前端问题特征
  {
    "status": 200,  // 接口正常
    "data": {...},  // 数据正确
    "但页面显示异常"  // 渲染/交互问题
  }

第二步：控制台诊断

• Console错误：

  • Uncaught TypeError → 前端JS错误

  • CORS policy → 后端接口配置问题