web网页测试bug定位详细步骤

news2024/11/15 11:40:23

前言

1、前置条件

1)需要的知识

熟透系统业务、团队成员情况;
熟悉使用F12或抓包工具;
了解HTTP/HTTPS协议;
了解系统的架构,数据走向;

2)定位前的操作

保存bug产生的记录;
排除低级问题;
包括网络问题、数据问题(脏数据);

2、定位问题思路和步骤

查看页面表现 > 查看状态码 > 接口的请求和返回以及js执行有无报错 > 查看服务器日志 > 配置问题 > 经验或其他

1)查看页面表现

用户层面问题:
用户自己的环境问题或者操作问题。如环境不通或者操作不正确等。

web页面问题:
大部分与前端功能、界面和兼容性等有关,样式一般是css问题,交互一般是js问题,文本一般是html问题。

主要有:
兼容性问题需要,更换浏览器类型和版本查看问题是否存在;

样式、交互、文本等css,js,html问题,可以按F12 打开控制台,在console中查看报错信息,一般会显示报错的文件和行号 ,对于出错的信息可以在Sources下查看对应报错的资源文件,基本上都会找到错误原因的变量未定义,参数未定义等;

图片不显示,浏览器右键点击图片,点击【检查】,找出图片的url,输入到浏览器的地址内,如果能打开图片,那么不显示图片的问题就是后台的问题;如果浏览器内不能打开图片,那么就是前端的问题;

2)查看状态码

打开开发者工具,切换到Network页签,看请求响应状态码。

4XX状态码一般表示客户端问题(也有可能是服务器端配置问题)
若401,检查是否带了正确的身份验证信息;
若403,检查是否有访问权限;
若404,检查对应的url是否真实存在。

5XX状态码一般表示服务器端问题,若500,是服务器内部错误,需要配合服务器log进行定位;
若502,可能服务器挂了导致;
若503,可能网络过载导致;
若504,可能执行时间过长导致。

3)查看接口请求返回数据以及js执行有无报错

若系统访问正常,进入操作页面,功能性报错。此时状态码200,仍有bug,需要查看接口请求返回数据,打开开发者工具,切换到Network页签,看找到对应请求,查看requests和respond。

如果请求url和参数不正确,则为前端问题;
如果请求url和参数正确,response响应内容正确,可能为前端取值错误;
如果请求url和参数正确,response响应内容不正确,则为后端问题;
如果有js执行报错,则为前端问题;

如果响应内容不正确,还可以查看数据库中数据是否正确,以具体到数据写入问题还是数据读取或缓存问题。

4)查看服务器日志

针对5XX问题,或检查后端接口执行sql是否正确,可以登录日志平台或服务器对应log目录下查看打印出的日志。

先进入到服务器的log目录下,一般是【cd logs】或【cd var/log/】;

tail -f catalina.out          //监视catalina.out 文件的尾部内容(默认10行)

动态查看日志文件,【tail -f 日志文件】,查看完后【crtl+c】退出;

5)配置问题

有时候遇到的问题,前后端都没报错,但功能就是异常,需要检查配置情况。包括应用系统前后台配置和环境部署配置信息

6)经验或其他

界面、布局、兼容性、交互问题——前端
业务逻辑、性能、数据、安全问题——后端

数据库版本不一致问题
代码版本不一致问题

代码本身没错,合并代码、冲突问题等;
确认偶然性问题还是必然性问题;
等等;

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

 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1813110.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

videoJS 视频 + 独一无二皮肤 + mp4/m3u8

推荐和参考文章: video.js调用-腾讯云开发者社区-腾讯云> 一、总结(点击显示或隐藏总结内容)一句话总结:网上有各种细致的现成的代码可以拿来用,没必要自己死专1、video.js有两种初始化方式?一种是在v…

生成式AI时代已来,你是否做好了准备?

面对正在来临的生成式AI时代,从个人到企业,都应该为之做好充足的准备。 生成式AI时代的黎明已经来临 “生成式AI时代的黎明已经来临,它将会改变我们每个人的生活和工作方式、改变每一个行业。”在近日召开的2024亚马逊云科技中国峰会上&#…

第5章:模型预测控制(MPC)

5.1 模型预测控制(Model Predictive Controller -- MPC) 注:MPC 更像是一种控制策略的框架,它使用了最优的控制思想在里面,如下的几种控制策略其实都是 MPC 的变体; MHC(Moving Horizon Contr…

ARM32开发--PWM通道输出

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 文章目录 前言 内容 需求 通用定时器多通道 开发流程 多通道配置 占空比更新 完整代码 高级定时器通道输出 开发流程 通道配置 Break配置 完整代码 总结 前言 加强掌握…

专属部署简介

什么是专属部署 专属部署(也称为专用部署)是一种部署选择,它允许用户将数据和应用部署到自己的专用云基础架构中,而不是与其他租户共享基础架构。这种部署方式可以提供更高的安全性、控制力和性能优化,因为用户可以完全控制和管理自己的基础设…

IT人的拖延——让“优先队列”带你走出“频繁切换”的拖延

在快节奏的IT行业,我们经常会面临多任务并行的挑战,经常这个事情还没做,那个事情就找上门,然后放下手中的活,去干另一件事。我们的工作环境多半是开放的环境,频繁的任务切换不仅降低了工作效率,…

2024/06/11--代码随想录算法1/17|理论基础、509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

理论基础 动态规划:当前状态由前面的状态推导而来 贪心:局部选最优 动态规划5步曲 确定dp数组(dp table)以及下标的含义确定递推公式dp数组如何初始化确定遍历顺序举例推导dp数组 509. 斐波那契数 力扣链接 动态规划5步曲 确定d…

【机器学习】让计算机变得更加智能

Hi~!这里是奋斗的小羊,很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~~ 💥💥个人主页:奋斗的小羊 💥💥所属专栏:C语言 目录 机器学习:让计算机…

[linux] 上手新ubuntu机器的初始化工作(自用侵删)

文章目录 环境类Vimzshother 应用类Typora激活环境准备解包替换文件app.asar激活Typora VsCodeextension.vscode乱码 WattToolkitQQWPS输入法:FcitxDeepin-wine : Wechat 环境类 Vim 直接贴配置 vim-Plug: let mapleader "," let g:mapleader "," le…

据阿谱尔APO Research统计显示,2023年全球有机硅弹性体凝胶市场销售额约为2.1亿美元

根据阿谱尔 (APO Research)的统计及预测,2023年全球有机硅弹性体凝胶市场销售额约为2.1亿美元,预计在2024-2030年预测期内将以超过4.17%的CAGR(年复合增长率)增长。 有机硅弹性体凝胶是一类具有独特性质和广泛应用领域…

labelme转YOLOv8、YOLOv5 标签格式 标注数据

前言 本文分析将labelme的标签,转为YOLOv8、YOLOv5的格式,实现模型训练。 首先了解YOLOv8和YOLOv5标签格式,然后了解labelme标签格式,最近实现数据格式转换。 1、YOLOv8和YOLOv5标签格式 YOLOv8 的标签格式与 YOLOv5 基本相同&…

拿到一个职称,竟然有这么多好处,你不知道吗?

很多从事建筑行业的小伙伴们都想评一个职称,但是很多人可能都是跟风,觉得同事评一个我也要评一个,那么拿到职称具体有哪些好处?甘建二给您分享一下: 1.专业认可: 俗话说,术业有专攻&#xff0c…

电磁兼容(EMC):整改案例(一)无时钟电路哪来的窄带干扰

目录 1. 异常现象 2. 原因分析 3. 整改方案 4. 总结 1. 异常现象 某家电用电器产品依据GB 4343.1-2018 家用电器、电动工具和类似器具的电磁兼容要求 第1部分:发射进行端子电压测试,测试结果如下图示。在频点40MHz裕量不足,仅有0.4dB。 2…

【因果推断python】28_面板数据和固定效应2

目录 固定效应 固定效应 为了方面后面更正式地讲述,让我们首先看一下我们拥有的数据。按照我们的例子,我们将尝试估计婚姻对收入的影响。我们的数据包含多年以来多个个体 (nr) 的这两个变量,married 和lwage。请注意,工资采用对数…

无线麦克风什么牌子的音质效果好?轻揭无线领夹麦克风哪个牌子好

​随着科技的不断发展,无线领夹麦克风已经成为现代演讲、演出和采访中不可或缺的工具。这种小巧便携的设备,能够让我们摆脱线缆的束缚,自由地在舞台上或讲台上移动,同时保持声音的清晰和稳定。在这篇文章中,我们将介绍…

【课程总结】Day6(下):机器学习项目实战–成人收入预测

机器学习项目实战:成人收入预测 项目目的 基于个人收入数据(包括教育程度、年龄、性别等)的数据集,通过机器学习算法,预测一个人的年收入是否超过5万美金。 数据集 地址:http://idatascience.cn/dataset-detail?table_id10036…

【UML用户指南】-14-对高级结构建模-实例

目录 1、实例的组成结构 1.1、类型 1.2、名称 1.3、操作 1.4、状态 1.5、其他特征 1.5.1、主动对象 1.5.2、链 1.5.3、静态属性 1.6、标准元素 实例是抽象的具体表现,可以对它施加一组操作,而且它可能有一组状态,来存储操作的结果。…

leetcode-04-[24]两两交换链表中的节点[19]删除链表的倒数第N个节点[160]相交链表[142]环形链表II

一、[24]两两交换链表中的节点 重点:暂存节点 class Solution {public ListNode swapPairs(ListNode head) {ListNode dummyHeadnew ListNode(-1);dummyHead.nexthead;ListNode predummyHead;//重点:存节点while(pre.next!null&&pre.next.next…

AI智能体的分级

技术的分级 人们往往通过对一个复杂的技术进行分级,明确性能、适用范围和价值,方便比较、选择和管理,提高使用效率,促进资源合理分配和技术改进和标准化。 比如,国际汽车工程师学会(SAE)定义了自…

CANOpen转PROFINET网关连接低压伺服系统

在现代工业自动化领域,随着技术的不断进步,各种总线通讯协议之间的转换和互操作性变得越来越重要。CANOpen和PROFINET作为两种广泛应用的通讯协议,各自具有独特的优势和应用场景。然而,在实际应用中,往往需要将CANOpen…