浏览器调试工具定位问题小记 待我称王封你为后i 2022-06-05 01:40 123阅读 0赞 **写在前面:** 在测试web界面,遇到问题时,常见的思路是根据界面错误查看日志,定位分析问题,有时候恰当地使用浏览器的调试工具,也能很有效地帮助问题的定位。本文中的例子很简单,目的是表达一下浏览器工具在web测试中的作用。 **背景:** 项目上在测试一个界面时,发现进去界面时,界面一直在loading,加载不出来(如下图),这个界面的逻辑是:进入界面时,默认查找出符合条件的用户。 ![Center][] **过程:** 查看后台SQL日志和服务日志,均未发现error信息,检查界面SQL,查询未超时。 刷新界面,打开Firefox的调试工具(F12),进入到“控制台”,再进入刚刚有问题的界面,查看控制台信息,发现错误(如下图): ![Center 1][] 点击错误内容,发现是获取不到参数“Phone”的信息(如下图): ![Center 2][] 检查数据库中user的phone参数,发现某条数据的字段值没有按照既定格式填写,是自定义值,导致界面查询不出,一直在loading状态,修改user信息后,界面加载成功。 **总结:** 浏览器的调试工具是web测试中很重要的工具之一,在遇到问题时,灵活运用,配合日志等定位分析问题,可以提升效率。 本例中的代码里,未对参数格式做校验,导致数据库可以保存任何值,而界面又加载不出来,这样的交互显然是不友好的,作为测试人员,也需要跟开发人员确认优化事宜。 [Center]: /images/20220605/07d8586ea1a94287a74752fb0e9fdc09.png [Center 1]: /images/20220605/c852fe889b414f0493d2d90a7bd3d9bb.png [Center 2]: /images/20220605/534a5889651a4a6e8a042c5265f6d1c9.png
相关 浏览器如何安状vue-devtools调试工具?? 一、Chrome浏览器安装方式: ①:点击右上角三个点 ②:点击更多工具 ③:点击扩展程序 ④:点击右上角的开发者模式,将他启用 ⑤:将下载的Vue.crx 朴灿烈づ我的快乐病毒、/ 2023年09月27日 10:54/ 0 赞/ 71 阅读
相关 使用gdb调试程序小记 1. ulimit -c unlimited . 2.运行程序产生core文件。 3.gdb 程序 core. 4.使用bt查看栈状态。 5.clear map\_re 矫情吗;*/ 2022年08月26日 04:49/ 0 赞/ 165 阅读
相关 浏览器调试 Console 控制台 可以用 console.info() 输出提示信息;console.debug() 输出调试信息;console.warn() 输出警示信息;co 淩亂°似流年/ 2022年08月22日 15:16/ 0 赞/ 193 阅读
相关 Java之断点调试小记 resume:重新开始,继续下一个断点,如果没有下一个断点则结束断点调试(等于结束虚拟机运行) 断点注意的问题 1、断点调试完成后,要在breakpoints视图中 谁践踏了优雅/ 2022年08月05日 14:24/ 0 赞/ 132 阅读
相关 浏览器调试工具定位问题小记 写在前面: 在测试web界面,遇到问题时,常见的思路是根据界面错误查看日志,定位分析问题,有时候恰当地使用浏览器的调试工具,也能很有效地帮助问题的定位。本文中的例子很简单,目 待我称王封你为后i/ 2022年06月05日 01:40/ 0 赞/ 124 阅读
相关 chrome浏览器解决 跨域调试问题 1、关闭chrome浏览器(全部) 我们可以通过使用chrome命令行启动参数来改变chrome浏览器的设置,具体的启动参数说明参考这篇介绍。[https://code.g 女爷i/ 2022年04月24日 14:42/ 0 赞/ 852 阅读
相关 Vue浏览器简易安装调试工具vue-devtools 环境要求: Node 6+ NPM 3+ git (非必要) 第一步 将vue-devtools的github项目下载到本地 1.第一种(有git工 ╰+哭是因爲堅強的太久メ/ 2022年04月13日 10:52/ 0 赞/ 726 阅读
相关 (Windbg调试七)c++内存泄漏问题定位 c++内存泄漏问题定位 内存泄漏指的是直接操作内存分配构造函数(例如new,malloc,HeapAlloc)来获得堆内存后,但是没有释放而导致的泄漏问题。我们 素颜马尾好姑娘i/ 2021年12月01日 12:26/ 0 赞/ 547 阅读
相关 chrome浏览器的调试工具 1.直接打开控制台 Fn+F12 2.Elements标签页 这个就是查看、编辑页面上的元素,包括HTML和CSS: 3.Resources标签页 Res 末蓝、/ 2021年09月13日 15:46/ 0 赞/ 453 阅读
还没有评论,来说两句吧...