如何定位问题,前端OR后端?

本文分享了在发现Bug时,如何确定问题范围及归属端的策略,包括检查各平台一致性、判断自身测试逻辑、利用调试工具定位前后端问题,并提供了一些避免常见错误的建议。

话说:

各位读者盆友,好久不见!今天跟大家分享个小内容:我们在报Bug的时候,最好能够定位清晰,应该报给哪个端,这样会高效帮助开发处理问题。

目录
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1、确定问题范围
2、确定属于哪个端?
3、总结

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
难度系数:★☆☆ ☆☆
建议用时:30min

1、确定问题范围
在发现一个Bug后,不要立即就报Bug。最专业的做法是:
1)假如在H5 发现的问题,那么问问自己,Native端是否存在同样的问题?确定Web端、Android端、iOS端的问题情形,在报Bug不迟;
2)确定是自己测试思路不正确导致的Bug 还是本身就有Bug?
如果因为自己对业务不熟悉,未按照流程测,那么出现的bug需要跟开发人员对接一下;尽量不报无价值的bug。

2、确定属于哪个端?

定位一个问题属于前端还是后端,也并非想象那么容易。

下面举几个例子:
1)看接口信息。
浏览器调试工具,非常方便查看。按照我们思路:500多半是服务器问题;404可能是前端页面找不到,也多是找不到resource,这个时候要考虑接口是否发生变更?

2)状态200是不是就代表不是后端问题?

在这里插入图片描述

后端接口200,但是返回一个错误信息,前端未做处理,导致的结果就是转圈圈。
这里归根到底还是前后端2端对接问题,后端对状态控制不明确,前端也未对返回信息做处理,导致转圈圈。

3)看参数

eg:页面我们明明选了打开了开关按钮,但是却未生效,报谁的Bug?

第一要确定,你在页面打开的开关,是否确实给了后端;
第二确定,后端确实返回的是你开关的状态。

在这里插入图片描述

在这里插入图片描述

第一张图表单中是打开的开关;第二张图表明delete属性还是false,表明表单中的选择未生效。
所以是后端问题。

4)如何定位前端问题?

简洁的方法是看Console控制台输出,一般js错误都会从这里输出。

3、总结
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
在你发现问题的时候,你就应该多思考,自己以后写代码如何避免类似问题。
eg:

  1. 日期处理
    日期处理,尤其要考虑时区转换。过了24点之后和24点之前,那是很不一样的;
    2)极限值
    对于输入框,数据库的极限是多少?否则后端很容易报错服务器繁忙;当你用一个数据类型,就要很清楚它的边界;
    3)字段一致性
    前端端对接,一定要注意属性一致,否则细节问题总是出问题

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

好了,后期再会。

### DevBox 环境中前端连接后端的方法 在 DevBox 环境下,为了使前端能够顺利调用后端 API 接口,通常采用以下几种方法来建立前后端之间的通信: #### 1. 使用本地代理服务器 通过配置 Webpack 或其他构建工具中的 `proxy` 属性,在开发阶段设置一个简单的 HTTP 代理。这样可以解决跨域请求的问题,并让前端应用看起来像是直接向自己的域名发起请求。 对于基于 Create React App 的项目来说,可以在 package.json 文件里添加如下字段[^2]: ```json { "proxy": "http://localhost:8080" } ``` 这里的 `"http://localhost:8080"` 是指代后端服务所在的地址和端口号。 #### 2. CORS 配置调整 如果不想使用代理的方式,则可以通过修改后端应用程序的 Cross-Origin Resource Sharing (CORS) 设置允许来自特定源的请求。这种方式适用于生产环境部署时也需要支持跨域的情况。 例如,在 Express.js 中启用 CORS 可以这样做: ```javascript const express = require('express'); const cors = require('cors'); let app = express(); app.use(cors()); // or specify allowed origins explicitly: // app.use(cors({ origin: 'http://example.com' })); ``` #### 3. Docker Compose 组合容器化解决方案 当整个系统由多个微服务组成时,利用 Docker Compose 来编排这些服务会更加方便高效。在这种情况下,所有的服务都在同一个网络空间内运行,因此可以直接通过服务名称相互访问而无需担心主机名解析等问题。 创建 docker-compose.yml 文件定义所需的服务组合: ```yaml version: '3' services: frontend: build: ./frontend ports: - "3000:3000" backend: build: ./backend environment: NODE_ENV: development expose: - "8080" ``` 此时,前端就可以轻松地通过相对路径 `/api/*` 访问到同属一个 compose project 下的后端服务了。 以上就是在 DevBox 开发环境下实现前后端交互的主要方式之一。具体选择哪种方案取决于项目的实际需求和技术栈特点。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值