如何定位bug归属前端仍是后台

后端的Bug，如何准确的定位问题在哪里，如何精准的描述Bug？

（1）查看报错日志

 查看报错日志，经过日志分析，须要有必定的经验，而且有必定的代码基础，才能更好地定位问题。

（2）查看数据库的数据

 了解所测功能的数据表结构，测试过程当中，查看数据库的数据，确认数据的正确性。

（3）查看缓存（如Memcache、apc、redis等缓存）是否正确

 

如今来分析bug多是前台仍是后台：

case1：文本框输入不合法的内容，点击提交按钮， 若是不合法的内容提交成功， 那应该是先后台没有作校验， 先后台都有这个bug

case2：文本框输入合法的内容，点击提交按钮， 查看数据库中的数据和输入的内容不一致， 这个时候须要看前台传的数据是否正确，使用fiddler抓包， 查看请求头里面的数据是否和输入一致，若是一致就是后台的问题， 若是不一致，就是前台的bug

case3：界面展现不友好， 重复提交 这些都是前台的bug

 

前台定位方法：

前台bug定位：按F12在console中查看报错信息，对于出错的js能够在Sources下查看对应报错的资源文件，写入禅道提交给开发便可

前台bug注意如下三个方面：

（1）网站前台的权限控制：没有权限的用户是不能直接输入url的方式来进行访问的，必须进行登陆。之后涉及到权限的测试，必定不能漏掉url的方式也须要验证一下。而在单个页面进行W3C测试时则须要去掉该权限控制。

（2）网站前台的title，对于这个也很容易忽视。进入到不一样的功能页面，title显示应该是有，而且要和你进入的页面一致。title就是在浏览器最左上角看到的那些文字 

（3）http和https的注意点：https是一种安全连接，它是须要证书的，而http就是普通连接，因此在你的系统中客户会要求某些关键的地方但愿加上这种安全链接，那么此时你须要注意的是，对于不须要的安全连接的地方千万也要去重点测试，有些开发会很容易忽略这一点。

你要打开HTTPS开头的网站，前提是该网站安装了SSL证书，只有安装了SSL证书的网站，而且开启了443端口，你才能够经过HTTPS加密协议无访问。若是没有则不能访问。好比在某个网站http协议后面加个s去访问，看可否访问成功，能成功，会显示绿色安全小锁，不然就不能访问。给你举几个安装了ssl证书，可要https访问的网站，1号店，天猫，淘宝，支付宝，百度，沃通CA，工信部网站等等

 

前端bug主要分为3个类别：HTML,CSS,Javascript三类问题

给个最大的区别方式方法：

出现样式的问题基本都是CSS的bug

出现文本的问题基本都是html的bug

出现交互类的问题基本都是Javascript的bug

如今以淘宝的前端人员工做为例进行相关bug定位的剖析

 

判断先后台问题的区分方法：

F12, 打开错误控制台console

区分先后台交互：查看网络请求

a) Html中若是有连接，有相应的状况下，基本能够定位到是属于前端的问题

b) 若是为空，或者有出现error错误信息，咱们就能够定位到属于后台开发的问题

TMS对应的VM模板，出现的一些截断控制，转换功能都属于前端的问题

 

1、HTML

最多见的HTML的问题—就是标签的问题了，最多见的排查和解决办法就是查看页面源代码，而后经过检查标签的工具，如今暂时提供idea.exe进行检查，有其余更好的工具再进行推荐。

常见问题类别：

标签闭合—表象，页面中出现大范围的混乱，就是少了标签的状况，致使标签未闭合

标签浮出—例如鼠标移动到文本位置，浮出全名的这种浮出形式都属于标签浮出的问题

标签在不一样的浏览器的一种解析方式的不一样致使的前端bug例如以下结构 

该部分能够看作为一个大的框便是标签<a> 内嵌标题的标签<p>，里面再有这些个内容<ing>,那么在不一样的浏览器中，可能ie和FF的解析会产生不一样，假设IE解析为<a><p><ing></ing></a></p>的一种形式，但在FF下可能解析为

<a><ing></ing></a>

<p></p>

的两行的形式从而致使前端在复古鞋/板鞋这块ing里面的格式产生混乱

结构可看为：

页面定点的问题：最明显的前端功能，在于点击某个连接将页面位置定位到对应的位置

a) 咱们能够经过右键，查看元素的工具进行定位到毛点所定位到的位置，若是出现问题这种问题很直观，而且能经过这种方法直接定位到问题页面的跳转，也属于html的问题，你们在出现点击未跳转或者跳转方式不正确的问题，直接能够定位到跳转属性的问题，找到对应的跳转对应的块提供给开发人员便可

 

2、CSS，产生样式问题。例如：排版，布局，颜色，背景等

css的bug主要分为：兼容型bug 、业务性bug 和 内容型bug

 

兼容型bug

a) 表现：仅在少数几个浏览器上出现

b) 缘由：浏览器的解析不一致

c) 解决：根据实际状况进行前端代码的通用性 

d) 类别：

脚本兼容型问题：在出现对应交互的问题就基本能够定位到脚本兼容型bug，例如DIV的显示和层结构。实际能够参考聚划算的几个商品鼠标移动到小图的时候，对应大图展现的功能。

 

页面样式兼容型问题：直接表象在样式上，都是基于框架的页面展现错误，很容易定位业务性bug

a) 表现：在全部浏览器下都有该问题

b) 缘由：对业务不熟悉

c) 解决：根据需求进行修改达到业务要求

 

该类型的定位，主要在和实现的要求不一致，最直接表如今页面的友好型，用户的可用性的bug，能够定位为该类型内容型bug

a) 表现： 前端自测正确，但在填入内容后，出现的错误，内容消失等

b) 缘由： 扩展性未考虑周全

c) 解决： 进行overflow test

输入内容的长度限制等功能可定位为内容型bug

 

3、Javascript

最直接的判断方法，刷新页面，出现滞后显示的一些模块基本都为脚本的输出块。该部分的一些问题能够参照兼容型bug中类别的脚本兼容型bug。 

有产生交互类的问题，大多数均可以定位到是属于javascript产生的问题，该部分大多不会报错有错误提示类的。页面左下方有出现javascript的错误提示；有弹出错误信息提示的bug；浏览器返回的一些错误弹出框都属于javascript的bug