巧用浏览器F12调试器定位系统先后端bug

作测试的小伙伴可能用过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、30二、40四、500这些最好都去了解下，这样结合了咱们的工具，在定位分析问题的时候，咱们会更坚决和自信。

小工具，可是很实用，这个技能你们get到了么。但愿你们在工做当中可以应用起来。用的多了就天然熟练了。