谷歌浏览器控制台调试汇总
前言
作为自动化测试人员,如何仅仅通过谷歌浏览器实现调试工作呢?本篇记录了常见的调试场景以及解决方式。
在Elements控制台进行元素定位
F12打开控制台后,Elements里以html的形式记录了当前页面。按ctrl+f,搜索框支持xpath定位哦!方便我们快速编写用例的page层,如下。(什么?你用的是插件工具进行定位的,好吧,如果你觉得管理方便也行)
在Element控制台进行元素修改
在修改页面字体内容,css样式大小时,可以采用此方式,直接对html里面的元素进行操作即可哦。比如我将“百度一下”改为“百度两下”。
在network控制台查看接口
这个控制台用的还是挺多的,常见的技能点包括:preserve log(保留日志);XHR(仅看接口);Time(查看时间);禁用标志(用于重新加载)
在Application控制台进行cookie、session操作
这个控制台一般用于session或cookie的清除、修改等,测前端与状态相关的逻辑时会需要用到的。
在console控制台里进行json展开
network的接口响应的json数据进行展开,右键copy project或者copy value,在console里赋给一个变量,使用copy方法,最后再粘贴即可。
# 将响应的json赋给一个变量 var arr = "右键copy project之后在这里粘贴" # 复制到剪贴板之后,再次粘贴即会自动展开。 copy(arr)
在console控制台里进行json提取
network的接口响应的json数据进行提取,右键copy project,在console里赋给一个变量。若只提取对象格式用点,若提取列表格式用map。如下所示。
# 将响应的json赋给一个变量 var arr = { "code":200, "list":[{"id":111},{"id":222}] } # 以列表方式返回(这一串可以也放在console.log()里) arr.list.map(item=> item.id) # 以列表方式返回 arr.list.map(item=>item.id).join(',')
下载没反应?
有的网站由于FQ、前端按钮失效、外网屏蔽等原因,点击某个按钮没反应,这时进行抓包操作获取到链接就可以了。
打开控制台-网络,清理掉,再次点击下载,把所显示的网址复制到迅雷里面进行下载就可以了。
后记
上述是常见的控制台的调试工作,当然控制台包括了很多功能,有一些不常用的就懒得写了,如在Source中进行断点调试、Performance里通过记录操作可以观测本机和页面性能;Lighthouse里还可以查看报告;等等这些不一一详叙啦!