在测试过程中,我们是如何去定位前后端问题的?

我们在做web端测试时,难免会遇到这样的一个情况:出现的bug,不知道是前端还是后端,这篇就为大家简单介绍几种比较好用的方法吧

场景:

清晰的记得那天是项目要上线,但是由于某种原因,页面可以打开,但是在点击任意链接后,没有实现该功能,且还会抛出异常提示?
此时,作为测试的我们,应该是要协助开发去定位问题:

1、可以通过谷歌浏览器中的开发者工具来定位问题

打开F12 或是谷歌浏览器右上角的三个小点,开启开发者工具

在这里插入图片描述
2、在开发中工具中,选择Network

在这里插入图片描述
3、刷新当前页面,并对有问题的地方进行点击,Network会抓取当前的页面的内容

在这里插入图片描述
在这里,有返回接口,也有些其他的数据,在这里,我们重点观察有问题的哪些地方

比如页面中有一个下拉框,但是没有数据,那么我们可以通过接口测试来判断:

<1>先ping下ip,看是否存在超时的现象,如果超时了,那么就可以初步的认定为是服务端的问题

在这里插入图片描述
ps:这里是拿的百度做的实验哦~

<2>如果接口可以跑通并返回了正确的数据,那么服务端这边是没有问题的,有可能是前端没有绑定好该字段

<3>如果接口不可以跑通,那么可以去找下服务端的问题,超时、异常等情况,还要考虑到是否有中间件的问题

4、用开发者工具做接口详细步骤:

<1> 在Network下,点击 view source 来露出headers请求入参

在这里插入图片描述

露出请求参数:
在这里插入图片描述

此时,可以打开接口测试工具,将这些请求参数复制下来,并粘贴到工具中

添加一个http请求:
在这里插入图片描述

添加一个信息头管理器:
在这里插入图片描述
因为参数很多,我们并不知道哪些是必传参数,还是不必传参,所以这里全都拿过来

最后添加一个察看结果树:

在这里插入图片描述
请求是成功的,但是出现了乱码,大家可以去修改下jmeter的编码配置

<1>打开jmeter的bin目录,找到jmeter.properties文件

在这里插入图片描述
文本方式打开,搜索sampleresult.default.encoding=ISO-8859-1改为sampleresult.default.encoding=utf-8 去掉最前端的注释#

在这里插入图片描述
再次跑下接口:
在这里插入图片描述
4、还可以在Network中看到页面响应时长

在这里插入图片描述

如有问题,请在博客下方留言,小友定当知无不尽~

### 关于Spring Boot和Vue.js前后端分离架构中的跨域问题解决方案 #### 后配置CORS支持 在Spring Boot应用程序中,可以通过多种方式来启用跨源资源共享(CORS),从而允许来自其他域名的请求。一种常见做法是在控制器级别或全局范围内应用`@CrossOrigin`注解[^1]。 另一种更灵活的方法是通过Java配置类实现自定义的CorsConfigurationSource bean: ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 对所有路径生效 .allowedOrigins("*") // 允许任何来源访问(生产环境建议指定具体地址) .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .maxAge(3600); // 预检请求的有效期为一小时 } } ``` 此方法能够精确控制哪些URL模式、HTTP动词以及原点被授权进行通信,并且还可以设置预检请求的最大有效期以减少不必要的握手次数[^2]。 #### 前调整Axios默认选项 对于基于Vue.js构建的应用程序来说,在发起AJAX请求之前修改axios库的基础配置也是一种有效的手段。可以在项目的入口文件(main.js或其他合适位置)加入如下代码片段: ```javascript import axios from 'axios'; // 设置公共参数 axios.defaults.baseURL = 'http://localhost:8181'; // 后API服务器地址 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; axios.defaults.withCredentials = true; // 如果需要携带cookie则开启此项 ``` 上述操作不仅简化了每次发送请求时重复输入基础URL的过程,同时也确保了即使存在多个异步调用也能统一管理认证凭证等问题[^3]。 #### 浏览器开发者工具排查 当遇到实际运行过程中仍然存在的跨域错误提示时,利用浏览器内置的开发者工具(F12键打开),特别是Network面板下的XHR标签页,可以帮助快速定位并解决问题所在。注意观察响应头(Response Headers)部分是否存在Access-Control-Allow-Origin字段及其对应的值是否符合预期设定。
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值