Web测试中定位bug方法

原文：https://www.jianshu.com/p/696474d96bde

在web测试过程中，经常会遇到页面中内容或数据显示错误，甚至不显示，第一反应就是BUG，进一步了解这个BUG的问题出在那里，是测试人员需要掌握的，可以简单的使用浏览器自带开发者工具、数据库工具配合去排查。

bug定位常用工具

Firefox——firebug、web developer、live http headers、http fox

IE插件——httpwatch

第三方工具——fiddler

慢速网模拟工具——firefox throttle

前台错误

前台的bug通常是功能、界面和兼容性等有关，涉及到jstl，jsp，js，css，html方面比较多。bug主要有两块，第一就是JS写的有问题，这个你可以按F12 打开控制台，在console中查看报错信息，一般浏览器都会显示报错的jS ，对于出错的js可以在Sources下查看对应报错的资源文件，基本上都会找到错误原因的变量未定义，参数未定义等，JS错误都很好解决的。这里向大家推荐一个测试交流圈q裙：1007119548。

第二个就是页面中的bug了，现在做web项目基本上没有做静态页面的都是动态了，所以你页面中要么使用了小脚本要么使用了EL表达式来存值。页面报错的话 在控制台是可以看到你错误行号和附近代码的，你自己去找就行了。

图片不显示，谷歌浏览器右键点击图片，点击【检查】，（火狐浏览器右键点击【使用firebug查看元素】）在打开的控制台上找出图片的属性，输入到浏览器的地址内，如果能打开图片，那么不显示图片的问题就是后台的问题；如果浏览器内不能打开图片，那么就是前端的问题。

开发者工具的使用（chrom浏览器）

（1）打开开发者工具，在浏览器菜单栏选择工具-开发者工具，快捷键是F12

（2）打开之后切换到Network页签，操作就可以看到请求响应

（3）再选择响应的链接，切换到Preview页签，可以看到响应的结果数据；切换到Headers页签可以看到请求的地址，请求的方式，结果等信息

（4）Response结果中可以看到返回的数据字段、值

 

 

 

 

 

可以根据响应的值判断一些bug所在

（1）响应中没有数据，则是后端数据没有返回，前端展示为空，则为后端问题。例如：列表中新增一个数据，没有显示，通过请求中可以看到数据total为0，则是后端数据没有返回。

（2）响应中有数据，但是前端显示错误了，可以根据字段值判断是否前端显示中取错了字段显示，可以判断是前端问题。例如：B端显示内容错误了，把登录用户名显示了登录帐号，则可以在响应中看数据是否返回正确，返回正确而显示错误，则有可能是前端绑定字段错误。

（3）响应中有数据，但是跟自己操作的结果不一致，可以根据数据库查询，如果数据库中也没有记录，可能是代码有问题，没有记录你的操作。例如：注册了一个帐号，但是登录时提示帐号或密码错误，这就可以在数据库表中查看是否有注册的数据。

后台错误

根据后台日志文件查找错误 后台涉及到servlet，jms，ejb，还有很多框架，struts，hibernate，spring，ibatis等。bug 比较难改，但是好找。主要就是看控制台报错，然后定位错误行号。如果配置文件没有问题，那么一般的报错就是空指针，或者是数组下标越界。看附近变量，看方法的参数基本上都可以定位错误了

重启的一般情况：
（1）热部署 （新增部分功能，或者修改部分bug) （2）发布新版本 （整个系统）（3）内存溢出，此时重启服务器即可

由于项目中有线程程序，./shutdown脚本关闭tomcat程序，不能把启动的线程全部关闭，造成服务器启动线程未关闭的错误,所以
Linux系统中重启Tomcat的一般步骤：（一般是先关闭进程，然后进行重启 ，如果 /要删除某个文件：rm 文件名，或者不为空的文件夹：rm -rf 文件夹名）
cd usr/local/ //测试服务器名称/bin
ps -exf //看测试服务器下运行的项目的主进程（最前面的数字为PID进程号）
kill -9 PID //强制关闭某一项目的主进程
./startup.sh // ./.sh即执行重启shell脚本文件 ，此时在测试服务器的bin下面，直接执行即可，其余的加上 chmod a+x shell脚本文件，也可用./执行
（小知识：
ps aux和ps -ef命令区别
ps aux 是用BSD的格式来显示 java这个进程
显示的项目有：USER,PID,%CPU,%MEM,VSZ,RSS,TTY,STAT,START,TIME,COMMAND
ps -ef 是用标准的格式显示java这个进程
显示的项目有：UID,PID,PPID,C,STIME,TTY,TIME,CMD）

如何查看日志 一台服务器可以部署多个应用
cd usr/local/****测试服务器名称/logs //查看先进入到服务器的logs目录下
tail -f catalina.out //****监视catalina.out 文件的尾部内容（默认10行）
日志中常见的问题
获取日志文件中常遇到的问题：
(1）编码问题：tomcat是新的，需要改编码修改tomcat的server.xml文件<Connector port="8080"URIEncoding="UTF-8"/>
特别是windows下的项目重新部署到linux系统下，
(2)空指针：程序问题，一般没有考虑到为空情况，或者主外键约束的数据为空，或者删除关联数据，导致为空
(3长度过长，超过最大长度，测试环境修改数据库字段长度后生产环境未修改，导致报错！！
(4)非法数据
(5)内存溢出：重启

一般的问题原因总结 程序：为空判断，增删改查,不同公众号调用的接口也不一样
数据初始化：数据库表结构和数据初始化，权限配置，

故障无法重现时：
（1）看日志，根据日志定位原因，则在测试环境中按照日志提示构造条件相同的测试案例测试，尝试在测试环境中将问题重现。问开发
（2）测试环境和配置与实际的工程环境和配置有哪些差异等等。同时主动与开发负责人、工程实施人员以及有经验的项目经理讨论，分析可能导致的原因。这里向大家推荐一个测试交流圈q裙：1007119548。

配置环境不一致导致
测试环境ok，生产环境新增时保存失败，查看后台日志报长度溢出，数据库内容字段要求和生产环境不一致

辅助工具：linux和SQL linux查看日志
SQL用来筛选数据或直接进行数据修改状态，多用于集成测试过程中前后流程相连接

jsp分不清前后台的，因为这里涉及到一个运行时刻的问题，它们的运行时刻是不同。用户发出请求后，服务器解析用户请求，转至对应的jsp，这个时候可以说是整个jsp都是后台程序。而Jsp做出响应后，把响应的内容返回给浏览器，这个时候浏览器就只看见html,css,javascript，这个时候所有的程序又都是前台程序。

火狐浏览器的web控制台

打开方式如下：菜单上点击【工具】

 

 

Web控制台页面显示

 

 

谷歌浏览器开发者工具

按F12打开，页面显示如下：

 

 

Element标签：该标签使用来查看页面的HTML标签元素的，能够也就是查看源码，我们可以看到布局，可以看到用到的样式，还有用到的链接等等。

console标签：这个就是一个web控制台，可以查看网页运行后提示的消息，错误或者警告以及输出内容等

sources标签：这个是显示资源文件的，可以查看运行的脚本，调试一般都是在Sources调试的

 

 

1.该选择框使用来选择资源的，当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件。
2.这个地方使用来调试js代码的地方，这个非常重要，看到行号上面有蓝色的标签，这个标签就是断电，当我们需要调试程序的时候打一个断电，然后通过3这个工具栏进行调试，那么调试过程就不详细解释，也就是打一个断电然后刷新页面程序会调到你打断点的地方，然后通过4来查看程序中变量的值什么的。
3.中的标签，第一个是停止状态的按钮就是表示程序是否停止（在debug时），后面的是程序继续跳过方法，跳过下一个语句，调到上一个语句。

Network标签：这个就是抓包常用的工具，可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源

 

 

那么这个页面就是用于抓包的页面，我们需要分析页面的请求，比如模拟登陆什么的都需要去分析程序是怎么在后台执行的，接下来就，我们可以看到Headers（请求消息头） Preview（预览） Response（响应） Timing（请求时间）Cookie这些东西

最上面还有一个工具栏，有一个红色的圆点和静止符号的按钮，那么这两个按钮，当为红色按钮的时候表示当前的请求不被清空（但是这里的请求是不跳转页面的请求，当跳转到新的页面，那么也会请求也会被清空），后面这个按钮就是清空请求的。

下面还有一行工具栏，这个工具栏主要是用来选择和过滤请求消息的。

再下面可以看到时间线，这个就是记录一个请求开始到结束的时间。

注意：当你需要请求到另一个页面的时候都不清空你的请求的时候需要勾选上Preserve log，同时让红色按钮显示红色

TimeLiness标签：这个就是请求时间

结语

感谢您的观看，如有不足之处，欢迎批评指正。

获取资料

本次给大家推荐一个免费的学习群，里面概括Python/性能/接口/安全/自动化软件测试以及面试资源等。
对测试感兴趣的同学，欢迎加入Q群：1007119548，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成。