浏览器调试工具定位问题小记

写在前面：

在测试web界面，遇到问题时，常见的思路是根据界面错误查看日志，定位分析问题，有时候恰当地使用浏览器的调试工具，也能很有效地帮助问题的定位。本文中的例子很简单，目的是表达一下浏览器工具在web测试中的作用。

背景：

项目上在测试一个界面时，发现进去界面时，界面一直在loading，加载不出来（如下图），这个界面的逻辑是：进入界面时，默认查找出符合条件的用户。

 

 

 

 

 

过程：

查看后台SQL日志和服务日志，均未发现error信息，检查界面SQL，查询未超时。

刷新界面，打开Firefox的调试工具（F12），进入到“控制台”，再进入刚刚有问题的界面，查看控制台信息，发现错误（如下图）：

点击错误内容，发现是获取不到参数“Phone”的信息（如下图）：

检查数据库中user的phone参数，发现某条数据的字段值没有按照既定格式填写，是自定义值，导致界面查询不出，一直在loading状态，修改user信息后，界面加载成功。

 

总结：

浏览器的调试工具是web测试中很重要的工具之一，在遇到问题时，灵活运用，配合日志等定位分析问题，可以提升效率。 本例中的代码里，未对参数格式做校验，导致数据库可以保存任何值，而界面又加载不出来，这样的交互显然是不友好的，作为测试人员，也需要跟开发人员确认优化事宜。