如何“顺藤摸瓜”对web应用bug进行初步分析

转自公众号文章：https://mp.weixin.qq.com/s/cSeXu3-_m_1ZREhEBnTg2Q

各位测试人员，你是否也有这样的时候：办公室格子间里，噼里啪啦的键盘声掩饰不住你内心的窃喜，跟踪了两天的bug，终于又被你抓（碰）住（到）了。你兴高采烈地键盘一按，将bug提交给开发同事分析。准备喝一杯热（白）咖（开）啡（水）庆祝下这个得之不易的结果，没想到被“嘀嘀嘀”的声音惊的皱起了眉头。“bug无法复现，拒绝。”开发同事言简意赅的一句话将你的成果驳回，欲哭无泪是吧？！是不是想吼一句：再给我一次机会，我绝对不会放过。
想必测试过web应用的测试人员都清楚，web应用测试易上手。对于简单故障，现象比较清晰，触发条件比较明了；但对于复杂故障，挖掘起来就不容易，复杂故障常具有偶发性（突然撞上的）。对于测试人员来说，机会稍纵即逝，当回过头再想复现这个故障的时候却有点无头无绪。将这类模糊不清的故障提交给开发人员分析，势必会遭遇开发人员的嗤之以鼻和无情驳回。那么，如何以正确姿势提交bug，才能让开发人员心服口服地接受呢？！
1、 测试环境信息明确；
2、 测试步骤/方法清晰；
3、 bug现象描述准确（最好有截图或录屏等）；
4、 bug复现频率（偶现/必现）；
5、 最好再加上一点：测试人员提交的bug现象的异常跟踪和初步分析结论；
有了以上几点，我想任何一个开发人员至少看到bug提交信息都会认真思考或分析。并且，节省了开发人员和测试人员之间，来回交流bug信息的时间损耗。
我想，对于前4点，大多数测试人员都已经在做，或者已经做的很好了。那么，可能会有部分测试人员会问：什么是异常跟踪和初步分析？那么，接下来，我们讲讲，对于web应用类的bug，测试人员如何进行bug的初步分析。

一、 工欲善其事必先利其器

合理且充分地使用工具，是一个工具的存在价值。
对于web类应用，我们经常使用的前端工具就是：浏览器。浏览器作为访问web应用常用的客户端，不仅给我们提供了检索、展示以及传递Web信息资源的功能，还能帮助我们对web应用的前后端交互进行初步分析。我们以google chrome浏览器为例，展示如何通过浏览器分析前后端交互及捕捉前端组件出现的简单问题。

图1 chrome浏览器开发者模式

如上图1所示，打开chrome浏览器开发者模式（Ctrl+Shift+I），可以看到开发者工具中的菜单栏：Elements、Console、Source、Network、Performance、Memory、Application、Security等。
Elements面板（元素，用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等，css可以即时修改，即时显示）；
Console面板（控制台，控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。还可以当作Javascript API查看用）；
Source面板（源码，该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等）；
Network面板（网络，主要用于查看header等与网络连接相关的信息）；
Performance面板（性能，可以用于当前页面活动的性能信息采集）；
Memory面板（内存，可以用于打印或查看当前页面内存堆栈信息）；
Application面板（应用，记录网站加载的所有资源信息，包括存储数据Local Storage、Session Storage、IndexedDB、Web SQ等，以及缓存数据、字体、图片、脚本、样式表等）；
Security面板（安全，判断当前网页是否安全）。
在我们测试web应用的过程中，对前端框架和知识了解不的测试人员，使用Network和Console面板，能满足测试人员对前后端交互跟踪、及前端bug的初步分析要求。

二、 磨刀霍霍向bug

同样以图1举例，我们看看当我们前端发起请求是，是如何同后端交互的。
在百度搜索框输入“天气”关键字，并发起搜索。通过开发者工具的Network面板，可以看到触发搜索操作后，向后端接口发起的请求，如图2中红线所示的请求。点击该接口请求，可以从右侧的Headers看到具体的请求接口url和请求内容，并可以从Response查看到接口响应的内容，及通过Timing获取该接口的具体响应耗时。

图2 Network面板分析举例

当我们发现web应用，浏览器页面出现报错时，我们可以简单通过Network面板分析出是否是后端接口报错，及定位到具体报错接口和具体报错内容。有了这一信息，提交bug时，也能明确指派对象，如后端开发同事，做到掷地有声。
仍然以百度搜索举例，若前端页面出现报错，但通过Network面板，发现所有前端发起的接口请求都正常响应，排除后端错误后。我们可以尝试下定位是否时前端bug。
同样百度搜索举例。如下图3所示，点击Console面板，我们可以看到当前页面加载时的前端信息。若web应用为前端元素错误，如找不到元素、加载失败等，通过Console面板，可以清晰地捕捉和定位前端问题。

图3 Console面板分析举例

通过Network和Console面板信息采集，有助于我们初步辨别页面报错时是前端bug还是后端bug，并且将收集到的信息提供给开发人员，能有助于节省他们的初步分析耗时。

三、 再来一剂强心针

如果作为测试人员的你，还有权限能够登录web应用的后台运行环境，那么，在通过开发者工具定位到后端bug时，能顺便采集下后端日志打印的报错信息，我相信开发人员今后会很乐意配合你的工作的。
此外，开发者工具不仅可以帮助我们“看”信息，还能帮我们进行前端调试或检索，良好地学习习惯可以帮助你更上一层楼。