首页 > 其他分享 >测试面经 之 如何判断 Bug 是前端问题还是后端问题

测试面经 之 如何判断 Bug 是前端问题还是后端问题

时间:2024-03-21 16:02:21浏览次数:15  
标签:前端 面经 问题 API 测试 日志 Bug

常见软件测试问题,如何判断一个Bug 是 Bug,并且如何判断该 bug 是 前端问题 还是 后端问题。

1. 记录 Bug:

首先,作为一个专业的测试,无论该 bug 怎样,是否太浅显,都需要及时记录该问题。
将该问题的标题,问题描述,复现步骤,环境版本,测试环境,测试账号,服务器端日志,报错截图,接口入参和返回值都及时记录下来。

2. 观察 Bug 的具体表现:

  • 如果 Bug 与用户界面(UI)相关,比如页面显示错乱、样式问题、交互问题等,那么很可能是前端的 Bug。
  • 如果 Bug 与数据处理、业务逻辑、数据库等相关,比如数据错误、计算错误、接口数据返回问题等,那么可能是后端的 Bug。

3. 查看错误日志和调试信息:

  • 后端的错误日志通常记录在服务器端的日志文件中,查看其中的错误信息、异常堆栈等有助于定位问题。
  • 如果错误信息表明问题出现在服务器端,那么很可能是后端Bug;如果错误信息表明问题出现在浏览器端,那么很可能是前端Bug。

4. 使用调试工具:

  • 前端开发者通常会使用浏览器的开发者工具进行调试,检查网络请求、DOM结构、JavaScript代码等。
  • 后端开发者则可能使用IDE的调试功能或专门的日志分析工具来定位问题。

5. 接口测试:

  • 在Web应用程序中,前端和后端之间通过API进行通信。可以使用接口测试工具来测试API是否正常工作。
  • 如果测试结果表明API无法正常工作,问题很可能出在后端;如果API工作正常但前端显示错误,问题则可能出在前端。

6. 代码审查:

仔细对比前端和后端的相关代码,尤其是涉及到出现Bug的部分。

  • 如果Bug与前端代码逻辑相关,比如DOM操作、事件处理、前端框架使用等,那么可能是前端的Bug。
  • 如果Bug与后端数据处理、业务逻辑实现等相关,那么可能是后端的Bug。

7. 数据库检查:

对于与数据相关的Bug,检查数据库中的记录也是一个有效的方法。例如,如果添加操作没有成功,可以查看数据库中是否有对应的记录。

8. 网络抓包分析:

使用网络抓包工具(如Charles、Fiddler等)来观察前端发出的请求和后端返回的响应。
如果前端发出了请求但格式不正确,或者后端返回了响应但前端无法正确解析,可以根据这些信息来判断Bug的归属。

综上所述,判断Bug是前端还是后端的需要综合考虑Bug的具体表现、错误日志、调试信息、接口测试、代码审查、数据库检查以及网络抓包分析等多个方面。在实际开发中,往往需要前端和后端开发者协作来定位和解决问题。

标签:前端,面经,问题,API,测试,日志,Bug
From: https://blog.csdn.net/Orange_hhh/article/details/136911196

相关文章

  • kernel BUG at arch/x86/kernel/apic/vector.c:174!
    问题兆芯设备适配ngrayos系统(debian系统4.20.1内核)时,在网口up时系统崩溃。版本如下:现象:经过排查,原因是因为兆芯设备启动参数加了noapic(不加系统无法正常刻录和启动),网口up时中断向量不够分配。APIC(AdvancedProgrammableInterruptController)是一种硬件设备,用于处......
  • [踩坑回顾]前端项目打包编译之后,页面访问异常:exports is not defined.
    周一遇到的问题,是qiankun框架的一个vue2子项目,使用yudao开源框架二次开发。 排查:1.开发环境正常。2.项目迁移前使用的babel、package配置均未被使用过。3.考虑打包使用的命令错误。发现未按照官方教程使用npm进行编译,后端同事用pom.xml文件使用pnpm命令进行编译。 解......
  • 前端学习-vue学习009-侦听器
    官方教程链接侦听器:import{ref,watch}from'vue'constcount=ref(0)watch(count,(newCount)=>{console.log(`newcountis:${newCount}`)})pre标签:识别json对象中的\n\t等转义字符,展示原始的JSON对象结构。v-ifv-elseasyncawaitfetch<template>......
  • 代码复盘bug
    代码有bug执行10000次最后只赛进去1个Process因为CloudServicecloudService=(CloudService)vertexModel;这里的cloudService变量会被共享,重复不断被覆盖vertexModelList.add(cloudService);publicvoidtestAddVertex(intcount,VertexModelvertexModel){......
  • 尚硅谷Vue3入门到实战,最新版vue3+TypeScript前端开发教程
    1.创建Vue3工程npmcreatevue@latest或者npminitvue@latest输入项目名和需要的工具后进入项目如果项目报错使用命令安装Node.js的项目依赖包npmi启动vue项目,查看项目是否创建完成npmrundev直接删掉src然后创建src文件夹,在该文件夹中创建main.ts和App.vue文件......
  • 学习前端相关
    HTML常用标签<strong>需要加粗的文字<strong><br>换行<hr>分割线<!--我是HTML注释--><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>......
  • 前端学习-vue视频学习011-自定义hooks
    尚硅谷视频链接axios了解了一下axios的语法importaxiosfrom'axios'exportdefaultfunction(){letdogList=reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_4972.jpg'])asyncfunctiongetDog......
  • 速通编译器前端
    编译器前端的概念词法分析及词法分析工具语法分析方法上下文无关文法与左递归的文法与左递归的消除方法递归下降的语法分析方法LL(k)语法分析方法#######first集合#######follow集合LR(k)语法分析方法LALR语法分析方法错误恢复方法语法制导的翻译语法制......
  • 【前端Vue】Vue从0基础完整教程第3篇:面经PC端-element (上)【附代码文档】
    Vue从0基础到大神学习完整教程完整教程(附代码资料)主要内容讲述:vue基本概念,vue-cli的使用,vue的插值表达式,{{gaga}},{{if(obj.age>18){}}},vue指令,综合案例-文章标题编辑vue介绍,开发vue的方式,基本使用,如何覆盖webpack配置,目录分析与清理,vue单文件组件的说明,vue通......
  • openwrt上使用emmylua + emmyluadebugger + clion调试luci
    lua-emmyluadebuggerAOpenWrtpackageofEmmyLuaDebuggerIntelliJ-EmmyLuaEmmyLuaDebuggerIntelliJ-EmmyLua是一个给JetBrains全家桶用的lua插件,也有VSCode版本VSCode-EmmyLua插件。EmmyLuaDebugger是配合IntelliJ-EmmyLua使用的remotedebugger,C++编写供lua调用的动态......