2023年11月28日发(作者：)

web页⾯常见bug

在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错误都很好解决的。

第⼆个就是页⾯中的bug了，现在做web项⽬基本上没有做静态页⾯的都是动态了，所以你页⾯中要么使⽤了⼩脚本要么使⽤了EL表达式来

存值。页⾯报错的话 在控制台是可以看到你错误⾏号和附近代码的，你⾃⼰去找就⾏了。

图⽚不显⽰，⾕歌浏览器右键点击图⽚，点击【检查】，（⽕狐浏览器右键点击【使⽤firebug查看元素】）在打开的控制台上找出图⽚的属

性，输⼊到浏览器的地址内，如果能打开图⽚，那么不显⽰图⽚的问题就是后台的问题；如果浏览器内不能打开图⽚，那么就是前端的问

题。

开发者⼯具的使⽤（chrom浏览器）

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

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

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

信息

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

-wh_

-wh_

-wh_

可以根据响应的值判断⼀些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 //强制关闭某⼀项⽬的主进程

./ // ./**.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 //监视 ⽂件的尾部内容（默认10⾏）

⽇志中常见的问题

获取⽇志⽂件中常遇到的问题：

(1)编码问题：tomcat是新的，需要改编码修改tomcat的⽂件

特别是windows下的项⽬重新部署到linux系统下，

(2)空指针：程序问题，⼀般没有考虑到为空情况，或者主外键约束的数据为空，或者删除关联数据，导致为空

(3)长度过长，超过最⼤长度，测试环境修改数据库字段长度后⽣产环境未修改，导致报错！！

(4)⾮法数据

(5)内存溢出：重启

⼀般的问题原因总结

程序：为空判断，增删改查,不同公众号调⽤的接⼝也不⼀样

数据初始化：数据库表结构和数据初始化，权限配置，

故障⽆法重现时：

（1）看⽇志，根据⽇志定位原因，则在测试环境中按照⽇志提⽰构造条件相同的测试案例测试，尝试在测试环境中将问题重现。问开发

（2）测试环境和配置与实际的⼯程环境和配置有哪些差异等等。同时主动与开发负责⼈、⼯程实施⼈员以及有经验的项⽬经理讨论，分析

可能导致的原因。

配置环境不⼀致导致

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

辅助⼯具：linux和SQL

linux查看⽇志

SQL⽤来筛选数据或直接进⾏数据修改状态，多⽤于集成测试过程中前后流程相连接

jsp分不清前后台的，因为这⾥涉及到⼀个运⾏时刻的问题，它们的运⾏时刻是不同。⽤户发出请求后，服务器解析⽤户请求，转⾄对应的

jsp，这个时候可以说是整个jsp都是后台程序。⽽Jsp做出响应后，把响应的内容返回给浏览器，这个时候浏览器就只看见

html,css,javascript，这个时候所有的程序⼜都是前台程序。

⽕狐浏览器的web控制台

打开⽅式如下：菜单上点击【⼯具】

-wh_

Web控制台页⾯显⽰

-wh_

⾕歌浏览器开发者⼯具

按F12打开，页⾯显⽰如下：

-wh_

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

链接等等。

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

sources标签：这个是显⽰资源⽂件的，可以查看运⾏的脚本，调试⼀般都是在Sources调试的

-wh_

1.该选择框使⽤来选择资源的，当⽹页被加载的时候向服务器端请求出来的⽂件包括.html .ccs .js这样的⽂件。

2.这个地⽅使⽤来调试js代码的地⽅，这个⾮常重要，看到⾏号上⾯有蓝⾊的标签，这个标签就是断电，当我们需要调试程序的时候打⼀个

断电，然后通过3这个⼯具栏进⾏调试，那么调试过程就不详细解释，也就是打⼀个断电然后刷新页⾯程序会调到你打断点的地⽅，然后通

过4来查看程序中变量的值什么的。

3.中的标签，第⼀个是停⽌状态的按钮就是表⽰程序是否停⽌（在debug时），后⾯的是程序继续跳过⽅法，跳过下⼀个语句，调到上⼀个

语句。

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

-wh_

那么这个页⾯就是⽤于抓包的页⾯，我们需要分析页⾯的请求，⽐如模拟登陆什么的都需要去分析程序是怎么在后台执⾏的，接下来就，我

们可以看到Headers（请求消息头） Preview（预览） Response（响应） Timing（请求时间）Cookie这些东西

最上⾯还有⼀个⼯具栏，有⼀个红⾊的圆点和静⽌符号的按钮，那么这两个按钮，当为红⾊按钮的时候表⽰当前的请求不被清空（但是这⾥

的请求是不跳转页⾯的请求，当跳转到新的页⾯，那么也会请求也会被清空），后⾯这个按钮就是清空请求的。

下⾯还有⼀⾏⼯具栏，这个⼯具栏主要是⽤来选择和过滤请求消息的。

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

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

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