精华内容
下载资源
问答
  • f12定位前后端bug
    万次阅读 多人点赞
    2020-06-25 15:15:40

    1.怎么找接口?

    最好在谷歌浏览器按f12查看,主要看network,就可以定位前后端问题。

    如果按f12以后,点击network,可以看到.js和.png这些结尾的都不是接口。

    点击network-XHR,这里可以看到接口。

    是过滤xhr请求。如果前后端分离了,数据会通过ajax请求获取,在很久以前,没有xhr的时候 ,页面不支持更新数据,需要刷新才行。有了xhr,页面支持局部更新数据。

    但是这里能显示所有当前界面所有的接口么?

    不一定。有些数据如果是跟页面一起带过来的就不在这。

    并不是所有都是前后端分离的,不分离的时候后端会把页面渲染好 再抛出来,然后你按xhr一个接口都没有。

    更多相关内容
  • 在测试人员测试过程中经常需要通过抓包来区分一些前后端Bug,特别是Web的测试,利用浏览器中的F12开发者选项,就能进行网站界面测试、调试,分析网页所出现的问题,查看html元素、查看响应事件等方面。...

    前言

    在测试人员测试过程中经常需要通过抓包来区分一些前后端的Bug,特别是Web端的测试,利用浏览器中的F12开发者选项,就能进行网站界面测试、调试,分析网页所出现的问题,查看html元素、查看响应事件等方面。

    F12开发者工具面板

    用Google打开一个页面,点击键盘右上方的F12按钮,弹出F12开发者工具面板。如下:

     

    1. 元素(Elements):查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
    2. 控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。
    3. 源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。
    4. 网络(Network):从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),测试人员重点要掌握该功能模块。

    Network面板

    1. 窗格功能

    •   :点击后进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置 。
    •  :默认开启,会在面板进行网络连接的信息记录,关闭后则不会记录。
    •  :点击清除网络请求列表。
    •  :过滤网络请求,点击打开Filters控制Requests Table具体显示哪些内容。
    •  :重新加载当前页面的时候,之前的请求资源信息将会保留。
    •  :是否进行缓存。启动开关时页面资源不会存入缓存,可从Status栏的状态码看文件请求状态。
    •  :网络连接开关,可设置限速模拟各种网络环境下的不同用户访问本页的情况。

     

     

    2.请求资源面板

    • Name:资源名称的URL路径。

     

    点击某个资源的Name可查看该资源的详细信息,根据选择的资源类型显示的信息也不太一样。

    1. Headers:该资源的HTTP头信息

     

    General

    • Request URL:资源的请求urlURL和域名的区别:域名就是到.com .net .org就结束了;URL就是除了域名 还有右面的/asl;dajs;dlfsdf.html 一长串
    • Request Method:HTTP请求方法
    • Status Code:响应状态码——200(状态码) OK(原因短语)301 - 资源(网页等)被永久转移到其它URL404 - 请求的资源(网页等)不存在500 - 内部服务器错误
    • Remote address:请求的远程地址
    • Referrer policy: Referrer-Policy 首部用来监管哪些访问来源信息会在Referer中发送应该被包含在生成的请求当中。

    Response Headers

    1. Connection:keep-alive ——维护客户端和服务端的连接关系
    2. Content-Encoding:gzip ——压缩编码类型
    3. Content-Type:text/html ——服务端发送的类型及采用的编码方式
    4. Date:Tue, 14 Feb 2021 03:38:28 GMT ——客户端请求服务端的时间
    5. Server:nginx/1.2.4 ——服务端的Web服务端名
    6. Transfer-Encoding:chunked ——分块传递数据到客户端
    7. Vary:告诉下游代理是使用缓存响应还是从原始服务器相应

    Request Headers

    • Accept:text/html ——客户端能接收的资源类型
    • Accept-Encoding:gzip, deflate ——客户端能接收的压缩数据的类型
    • Accept-Language:en-US,zh;q=0.9——客户端接收的语言类型
    • Connection:keep-alive ——维护客户端和服务端的连接关系
    • Cookie: ——客户端暂存服务端的信息
    • Host:www.jnshu.com ——连接的目标主机和端口号
    • Referer:http://www.jnshu.com/daily/15052 ——来于哪里

    2.Preview:根据所选的资源类型(JSON、图片、文本)显示相应的预览

     

    3.Response:显示HTTP的Response信息

     

    4.Cookies:显示资源HTTP的Request和Response过程中的Cookies信息。

     

    5.Timing:显示资源在整个请求生命周期过程中各部分花费的时间

     

    • status:Http的状态码。
    • Type:请求资源的MIME类型,MIME是Multipurpose Internet Mail Extensions (html,css,js等)。
    • Initiator:标记请求是由哪个对象或者进程发起的(请求源)。
    • Size:从服务器下载的文件和请求的资源大小,若是从缓存中取得资源则该列会显示“from cache”。
    • Time:请求或下载的时间,从发起Request到获取到Response所用的总时间。
    • Waterfall:显示所有网络请求的可视化瀑布流(时间状态轴),点击时间轴,可查看该请求的详细信息。

    定位前后端Bug

    1. 定位前端的问题
    • 点击页面上的某个按钮无反应时,在Console处看到js报错,并在Network中没看到前端对后端的功能接口发起调用,点击按钮无返回数据,一般为前端的Bug。

    • 红色方框圈出来的地方是参数,若要求参数不能为空,但上图中如name字段的参数为空,那就是前端传参的错误,如果这里的参数错误,那也是前端的问题。

     

    • 和接口文档对比一下参数是否一致,如若不一致,request url错误,就是前端的BUG,若接口文档有这个数据,但实际为空,也是前端的错误。

    2.定位后端的问题

    preview和response都可以定位后端bug,但是preview更加直观,可以看到所有数据的返回值。而response只会返回你选中的那条数据的返回值。

    • 在网页点击某个按钮无反应时,在Console处看到js没有报错,并在Network中看到请求返回的状态码是500,那么这个BUG就是由后端导致的。

    • 上图response和preview的返回值内容如果为空或者返回值不对,那就是后端的Bug。

    展开全文
  • 如何定位前后端Bug

    2022-05-31 15:56:15
    bug定位

    1 定义

    • 前端 : 是用户看得见摸得着的东西,主要体现在页面的视觉效果以及交互设计上。
      特性:界面/布局/兼容性/交互相关
      前端的bug主要分为3类:HTML CSS javascript三类问题
      出现样式的问题基本都是CSS的bug;
      出现文本的问题基本都是html的bug
      出现交互类的问题基本都是Javascript的bug

    • 后端 :则侧重于更深层面的东西,关于逻辑,关于数据,关于平台的稳定性与性能。后台主要负责实现具体的功能。
      特性:数据/安全性/逻辑性/性能相关
      后端的Bug如:
      (1) 查看报错日志
      查看报错日志,通过日志分析,需要有一定的经验,并且有一定的代码基础,才能更好地定位问题。
      (2) 查看数据库的数据
      了解所测功能的数据表结构,测试过程中,查看数据库的数据,确认数据的正确性。
      (3) 查看缓存(如Memcache、apc、redis等缓存)是否正确

    2 定位方法

    1. 经验法
      软件测试人员应不断精进自己的技能,负责的项目多了,自然对功能的实现过程有了解,也就明白如何分类BUG了。例如:网页上的某个图片的分辨率不对,如果我们了解实现过程,可以想到一般情况下,是根据某个地址去服务器取图片的,数据库一般只保存地址,那么图片能正确显示,就说明后端的基本功能是满足需求的。如果具体图片分辨率有误,最可能的原因是前端显示过程出了差错。

    2. 日志查看法
      当我们发现一个BUG,并不确定这个BUG属于前端还是后端,可以查看后端服务的日志,复现BUG时,查看日志中有没有相关信息。基本可以认为,如果日志没有输出,很可能这个功能并没有与后端交互,也就不存在后端的问题。反之,如果日志有输出,可以进一步查看有无错误日志信息,进一步分析。
      查看后端服务log日志有无错误日志信息。
      查看日志:https://baijiahao.baidu.com/s?id=1727360160265115655&wfr=spider&for=pc

    3. 接口查看法
      这种方法常用于查看是后端返回给前端的数据有误,还是前端显示有误。大多数浏览器都有自带的接口查看工具,如Chrome,FireFox等都可以通过F12开启抓包,在NetWork中可以看到当前页面发送的每个http请求。
      通过Chrome看到的接口情况如下:在这里插入图片描述
      我们需要对比通过后端接口拿到的数据和前端显示的数据,来确认问题出在哪里。如果数据错了,页面显示是错的,也是正常的,先从后端入手去解决。如果数据对了,但是显示错了,就需要问问前端的开发人员了。
      抓包:传参内容不对,前端bug;响应内容不对,后端bug。

    3 实战

    问题:在某购物网站上购买了两件商品,一件打折,一件不打折。当你下完订单并且成功支付之后,再次去我的订单中查看订单内容时,发现两件商品只显示出来一件,打折的商品没有显示出来。
    分析:
    在这里插入图片描述

    展开全文
  • 做测试的小伙伴可能用过httpwatch,firebug,fiddler,charles等抓包(数据包)工具,但实际上除了这些还有一个简单实用并的抓包工具,那就是浏览器的F12调试器。 httpwatch,firebug都是浏览器的插件,需要额外...

    做测试的小伙伴可能用过httpwatch,firebug,fiddler,charles等抓包(数据包)工具,但实际上除了这些还有一个简单实用并的抓包工具,那就是浏览器的F12调试器。

    httpwatch,firebug都是浏览器的插件,需要额外下载,fiddler,charles也需要额外下载安装包另行安装,但是浏览器F12调试器却是所有浏览器内置的调试器,不需要大家额外去安装的,打开它只是一个顺手的事情,而且它提供的功能也比较强大,因此如果在开发或者测试web系统的时候,我们可以先考虑使用这个调试器去抓包,来调试系统或者用它来协助定位系统中的bug。

    下文中我准备了几个小案例来说明这个工具的用法以及使用它的便捷性。

    废话不多说,我们首先来一睹它的阵容,以火狐为例,打开浏览器,再按F12就可以打开调试器,如下图:

    注意:不同的浏览器,调试器在ui上可能会有少许差异,但基本功能都差不多,掌握了某种浏览器调试器的用法后,其他也很容易上手。

    下面我们通过几个小案例来说明我们测试人员在系统测试中有哪些场景能够应用上调试器。

    场景:在对web系统进行测试时,如何分析一个bug是来自于前端还是后端。

     首先说一下,

    为什么找到网站中的bug后还要去分析它到底是属于前端bug还是后端bug,三个原因:

    1.在一些公司,一个系统可能是由前端团队和后端团队共同开发出来的,因此在分配bug的时候,不同模块的bug一般都会指派给对应的负责团队乃至于个人。

    2.提bug的时候,如果能尽量提供有价值的信息给开发人员,来缩小定位范围,甚至于如果能够直接协助定位到bug出在哪里,那么开发人员将更容易去fix掉bug,从而降低了测试和开发之间的沟通成本,提高了工作效率。

    3.bug提的好从侧面也能体现测试人员具备了较高的技术专业性,而不是只会点点点,个人形象在项目团队中也会得到迅速提升。别人也会认为你是大佬,他们看你的表情如图:

    我们在分析一个系统bug来自于前端还是后台时,最有用的两个是调试器提供的两个标签,这两个标签底下都记录了一些数据,一个是控制台,一个网络

     控制台:记录了前端js执行的情况,以及前端向服务器发出去的所有http请求信息,,如果有js错误可以在控制台下看到,同样如果发送到后台的某个http请求没有得到服务器正常响应,也能看到他的状态信息。

    网络:记录了前端往服务器发的所有的http请求信息,而且每个请求发送了什么数据,服务器是否正常响应了请求,如果响应了,响应回来的状态码是什么,响应数据是什么都可以在“网络”标签下看到。

    说了这么多,到底怎么用呢。

    第一个小案例

    1)访问:http://39.108.136.60:8380/ningmengban/app/login/login.html

    2)输入登录账号(用户名 / 密码):304034318@qq.com / 123456

    3)点击登录,无任何反映(没有提示也没有跳转)

    从页面交互看,输入账号,点击登录要么登录成功进入系统,跳转到系统其他页面,要么登录失败给出错误提示,而现在没有任何反应,这肯定是一个bug,但是这个bug到底是属于前端bug还是后端,我们无从而知,但是我们可以顺手打开浏览器调试器来分析定位一下。

    打开控制台,我们看到了控制台有一个js错误,并且是login.js这个脚本在执行的时候报的一个错误,login是登录的意思,所以我们下意识认为这个js脚本就是定义了登录前端逻辑的js脚本,点击登录按钮没任何反应这个bug很可能就是因为前端js执行报错引起的,截个图,写上自己的分析。

     为了进一步验证自己的猜想,还可以再看下“网络”标签:

    定论:经过分析,前端登录脚本执行报错导致了前端没有对后台登录接口发起调用,页面点击登录按钮没有任何提示,这个bug属于前端的bug。我们提bug的时候带上上面的两个截图,里面有我们的分析。

    第二个小案例

    1)访问:http://39.108.136.60:8380/ningmengban/app/login/login.html

    2)输入登录账号(用户名 / 密码):304034318@qq.com / 123456

    3)点击登录,无任何反映(没有提示也没有跳转)

    从页面交互看,输入账号,点击登录要么登录成功进入系统,跳转到系统其他页面,要么登录失败给出错误提示,而现在没有任何反应,这肯定是一个bug,但是这个bug到底是属于前端bug还是后端,我们无从而知,但是我们可以顺手打开浏览器调试器来分析定位一下。

    打开控制台,我们看到了控制台并没有js错误,但是有向后台发起一个请求,此时还无法有效定位到问题到底发生在前端还是后端,但是可以截个图,写上自己的测试过程:

    为了进一步定位,可以打开“网络”标签:

    定论:这个404 not found请求路径找不到的问题,可能是前端后台开发人员改了接口地址,也有可能是前端js发起登录请求是接口地址写错了,所以这个bug可以题给前端开发,也可以提给后端。只要提供了上面分析截图,开发人员也能秒改这个bug。

    第三个小案例

    1)访问:http://39.108.136.60:8380/ningmengban/app/login/login.html

    2)输入登录账号(用户名 / 密码):304034318@qq.com / 123456

    3)点击登录,无任何反映(没有提示也没有跳转)

    从页面交互看,输入账号,点击登录要么登录成功进入系统,跳转到系统其他页面,要么登录失败给出错误提示,而现在没有任何反应,这肯定是一个bug,但是这个bug到底是属于前端bug还是后端,我们无从而知,但是我们可以顺手打开浏览器调试器来分析定位一下。

    打开控制台,我们看到了控制台并没有js错误,但是有向后台发起一个请求,同样,此时还无法有效定位到问题到底发生在前端还是后端,但是可以截个图,写上自己的测试过程:

     继续打开“网络”标签,我们看到这个底下有一个500请求,根据请求中的关键字眼login我们断定这个就是登录接口,而500则说明是后端服务器内部异常,一般是由于后台代码执行中报错导致的,所以截图写上我们的分析,到时候提bug附上这个截图:

     定论:根据请求返回的状态码500,我们就能断定这个bug是后台代码执行时候报错导致的,提bug带上上面的这个信息,开发人员就知道要去检查登录接口的代码了,因此缩小了开发定位问题的范围,保证了开发能在第一时间快速fix掉bug。

    好了,给大家演示了三个小案例,教大家在碰到bug时,如何顺手借助浏览器调试器定位到bug到底来自于前端还是后端,当然我建议大家平时多关注一下http请求的响应状态码,对于常见的http code,比如200、302、404、500这些最好都去了解下,这样结合了我们的工具,在定位分析问题的时候,我们会更坚定和自信。

    小工具,但是很实用,这个技能大家get到了么。希望大家在工作当中能够应用起来。用的多了就自然熟练了。

    展开全文
  • 如何定位前后端Bug

    万次阅读 多人点赞 2021-04-15 17:21:52
    web项目的话,一般工作中使用方式比较多的是使用浏览器自带的F12抓包看接口请求。 如果是app客户端之类的,一般采用fiddler等工具进行抓包接口。 不管哪种方式,目的都是通过查看接口,去定位分析属于前端问题还是...
  • 做测试的小伙伴可能用过httpwatch,firebug,fiddler,charles等抓包(数据包)工具,但实际上除了这些还有一个简单实用并的抓包工具,那就是浏览器的F12调试器。 httpwatch,firebug都是浏览器的插件,需要额外...
  • 1、经验法 软件测试人员应不断精进自己的技能,负责的项目多了,自然对功能的实现过程有了解,也就明白如何分类bug了。 例如: 网页上的某个图片的分辨率不对,如果我们了解实现过程,可以想到一般情况下,是根据...
  • Server:jsp+Servlet+json 数据库:sql、MySQL、oracle等 前台: 涉及到 jstl,jsp,js,css,htm等方面 后台:servlet,jms,ejb, 还有很多框架,struts,hibernate,spring,ibatis Jsp:分不清前后台的,因为...
  • 做测试的小伙伴可能用过httpwatch,firebug,fiddler,charles等抓包(数据包)工具,但实际上除了这些还有一个简单实用并的抓包工具,那就是浏览器的F12调试器。 httpwatch,firebug都是浏览器的插件,需要额外下载...
  • 如何区分前后端BUG

    万次阅读 多人点赞 2019-11-09 15:46:02
    所以,一个资深的测试人员的基本功应该是这样的:深挖业务和功能需求,找出BUG定位BUG,提出解决方案。这里我们就来说说,当我们找到了BUG,应该把BUG提交给谁去解决,这属于BUG定位的问题。 试想: 根据需求,用户...
  • 做测试的小伙伴可能用过httpwatch,firebug,fiddler,charles等抓包(数据包)工具,但实际上除了这些还有一个简单实用并的抓包工具,那就是浏览器的F12调试器。 httpwatch,firebug都是浏览器的插件,需要额外...
  • Web测试必备技能——F12定位bug属于前端还是后台

    万次阅读 多人点赞 2019-10-08 17:39:57
    (1)打开开发者工具,在浏览器菜单栏选择工具-开发者工具,快捷键是F12 (2)打开之后切换到Network页签,操作就可以看到请求响应 (3)再选择响应的链接,切换到Preview页签,可以看到响应的结果数据;切换到...
  • 【汇总】如何定位前端bug和后端bug

    千次阅读 2021-06-24 10:02:06
    今天就来跟大家分享“如何定位前端bug和后端bug” 标题 1、 样式问题 关于布局和兼容性问题; 举个例子:同个界面,在15寸电脑上可以看到完整的内容,但是在13.3的电脑上只能看到部分;再举个例子:在Android 9.3的...
  • (1)打开开发者工具,在浏览器菜单栏选择工具-开发者工具,快捷键是F12 (2)打开之后切换到Network页签,操作就可以看到请求响应 (3)再选择响应的链接,切换到Preview页签,可以看到响应的结果数据;切换到...
  • 测试工程师不只是负责发现问题,除了发现问题这种基本功外,定位问题,提出解决方案,提出预防方案也是要掌握的基础技能一、定位问题的要求(前提当然是对功能、产品或业务需要熟悉,BUG书写要尽量贴近开发易懂语言)...
  • 在测试过程中,我们是如何去定位前后端问题的?

    万次阅读 多人点赞 2020-08-08 00:51:15
    我们在做web测试时,难免会遇到这样的一个情况:出现的bug,不知道是前端还是后端,这篇就为大家简单介绍几种比较好用的方法吧 场景: 清晰的记得那天是项目要上线,但是由于某种原因,页面可以打开,但是在点击...
  • 测试如何定位判断是前端的bug还是后端bug

    万次阅读 多人点赞 2022-03-18 13:42:52
    软件测试员是找bug,但也不仅仅是找bug。 首先我们需要了解下什么是软件测试。 软件测试简单点来说是验证软件在功能、性能等方面是否满足用户需求。 在整个软件测试过程中,软件测试狭义上指软件初步发版后,对...
  • 学会通过fiddler等工具抓包分析BUG、通过日志定位BUG
  • web测试中如何简单定位bug

    千次阅读 2022-01-25 16:08:50
    定位bug之前要确定自己对用例的理解是否有问题(在工作中,很多测试结果错误都是因为自己对用例的理解没有到位,以致于操作错误导致结果不符合预期) 一般来说bug分为前端bug和后端bug,前端bug为请求数据错误,后端...
  • 如何判断前后端bug

    千次阅读 2019-09-28 03:52:54
    这里先说定位问题的要求,定位问题要向深入,前提当然是对功能、产品的流程、开发方案、开发人员非常熟悉了,以我们部门为例,定位bug至少要到下面这种程度。首先确定是界面显示问题还是功能问题 如果是界面问题,...
  • 判断一个bug是前端问题还是后端问题,是一道非常经典的面试题,很多小伙伴在这道题上栽过跟头。...比如Web程序,可以用F12直接查看请求和响应数据;App程序,可以用Fiddler、Charles、mitmproxy、......
  • A 打开开发者工具,在浏览器菜单栏选择工具-开发者工具,快捷键是F12 B 打开之后切换到Network页签,操作就可以看到请求响应 C 再选择响应的链接,切换到Preview页签,可以看到响应的结果数据;切换到Headers页签...
  • 前端bug特点 :1、界面相关 2、布局相关 3、兼容性相关后端bug特点 :1、业务逻辑相关 2、性能相关 3、数据相关 4、安全性相关定位前后端bug:1、经验法:软件测试人员应不断精进自己的技能,负责的项目多了,自然对...
  • 所以,一个资深的测试人员的基本功应该是这样的:深挖业务和功能需求,找出BUG定位BUG,提出解决方案。这里我们就来说说,当我们找到了BUG,应该把BUG提交给谁去解决,这属于BUG定位的问题。 试想: 根据需求,用户...
  • 判断前后端bug

    千次阅读 2021-09-14 13:32:36
    判断如何定位和分类bug之前,需要了解一个页面的请求过程,以http请求为例: 1、用户在前端页面操作,如点击某个提交按钮 2、页面携带数据进行请求,访问具体...定位前后端bug,有什么方法? 1、经验法 软件测试人员应
  • 测试,如何定位 前后端bug ? 首先需要清楚知道 数据的传输流程:用户在前端页面操作,如点击某个功能,页面携带数据进行请求,访问具体功能接口,由后端服务执行该接口相应的业务逻辑,如涉及数据,后端从数据库取...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,183
精华内容 473
关键字:

f12定位前后端bug