一、核心区别：一张图看懂

二、实战三步定位法

第一步：查看页面表现（肉眼观察）

典型的前端BUG特征：

• 文字重叠、排版错乱：样式问题基本都是前端

• 图片加载失败：图片路径错误或格式问题

• 按钮点击无效果：JS事件未绑定或执行错误

• 页面卡顿、动画生硬：前端性能问题

 典型的后端BUG特征：

• 页面显示“服务器错误”：直接报5xx错误

• 数据一直加载中：接口超时或未响应

• 提交数据后无变化：数据未成功写入数据库

• 所有用户都遇到同样问题：服务端通用问题

第二步：检查网络请求（浏览器F12）

按F12打开开发者工具 → 点击Network标签

前端问题迹象：

✅ 接口请求根本没发送 → 前端代码逻辑问题
✅ 请求参数明显错误 → 前端传参问题

1. // 示例：前端传参错误

2. // 正确：{page: 1, size: 10}

3. // 错误：{page: "1", size: "10"}  // 字符串格式

AI写代码

后端问题迹象：

❌ 接口返回5xx状态码 → 服务器错误
❌ 接口返回4xx状态码 → 后端验证失败
❌ 返回数据结构错误 → 后端数据格式问题

1. // 示例：后端返回数据错误

2. // 正确：{"data": [...], "total": 100}

3. // 错误：{"data": [...], "totals": 100}  // 字段名错误

AI写代码

第三步：验证数据流向（终极判断）

测试方法：

1. 直接调用接口：使用Postman或ApiPost直接请求后端接口

2. 对比数据：对比接口返回数据与页面显示数据

判断标准：

• 接口返回正确 + 页面显示错误 = 前端BUG

• 接口返回错误 + 页面显示错误 = 后端BUG

• 接口返回正确 + 页面显示正确但功能异常 = 前端交互BUG

---

三、常见场景案例分析

案例1：用户列表显示空白

• 操作：打开用户管理页面

• 排查：

  1. F12查看Network，发现接口返回500错误

  2. 用Postman请求同样接口，同样返回500

• 结论：后端BUG（接口服务器错误）

案例2：搜索功能无效

• 操作：在搜索框输入关键词，点击搜索

• 排查：

  1. F12发现搜索请求未发送

  2. 检查发现搜索按钮点击事件未绑定

• 结论：前端BUG（JS事件问题）

案例3：订单金额计算错误

• 操作：购买3件单价10元的商品

• 排查：

  1. 页面显示总价：100元（错误）

  2. F12查看接口返回：{price: 10, quantity: 3, total: 30}

  3. 接口返回正确，页面显示错误

• 结论：前端BUG（计算公式错误）

---

四、测试新人的必备工具

1. 浏览器开发者工具（F12）

• Elements：查看页面元素和样式（查前端）

• Console：查看JavaScript错误（查前端）

• Network：查看网络请求（查前后端）

2. API测试工具

• Postman：直接测试后端接口

• ApiPost：国产类似工具

• curl命令：命令行快速测试

3. 抓包工具

• Fiddler：抓取HTTP/HTTPS请求

• Charles：Mac平台常用抓包工具

• Wireshark：深层网络分析

---

五、实用沟通技巧

提BUG时这样说，开发更愿意改：

❌ 不要这样说：

“这个功能坏了，赶紧修一下”（太模糊）

✅ 要这样说：

“用户列表页面，搜索功能无法使用

• 环境：测试环境Chrome浏览器

• 操作：在搜索框输入关键词，点击搜索按钮

• 现象：页面无反应，Network中未见搜索请求发出

• 预期：应发送请求并显示搜索结果

• 疑似：前端搜索事件未绑定”

感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取