F12的用法
F12在Web测试中十分重要,可以定位元素(UI自动化常用),查看网页响应时间/数据(定位BUG,测单页面响应时间→性能)
Elements
点击这个按钮,将光标移至“Google”图片位置并点击,右侧的F12控制台就会选中对应的HTML标签(......可以修改页面元素的属性)。
重点:在“标签”位置右键→Copy→Copy Xpath (即可获取元素的定位)


Console和Sources
这个两个用的比较少,console会打印请求,返回的结果以及数据,可以有一定的分析作用。
可以判断:js错误,数据错误
Network

| Headers:头信息 |
请求头、请求体,响应头、响应体 请求数据: Query String Parameters → get传参的请求数据 Form Data → post传参的请求数据 |
| Preview:预览 | 返回数据预览 |
| Response:响应报文 |
格式可以是HTML,json.... 依据响应报文,判断是否为bug是哪端的 |
| Timing:时间 | 这个页面请求到响应的时间 |
注意:
红色为录制状态,会将浏览器的所有操作显示在控制台
点击可以清除控制台所有的内容
F12的用法的更多相关文章
- 谷歌浏览器F12基本用法
第一步:打开你想进行调试的页面,并按F12进入到调试模式 此处以百度页面为例进行功能展示 这是关于最右侧“元素选择器”的功能展示 关于第二个功能的使用,这个功能是将页面适应成手机屏幕大小, eleme ...
- VS2013使用技巧汇总
1. Peek View 在不新建TAB的情况下快速查看.编辑一个函数的代码. 以前要看一个函数的实现,需要在使用的地方点击F12跳转到该函数,实际上这是很浪费时间的.VS2013Peek View便 ...
- 网页console console.log 用法 Chrome F12
#########sample 0 https://www.cnblogs.com/xiaozong/p/4961929.html https://blog.csdn.net/shanliangliu ...
- ThinkPad紧凑型蓝牙键盘(0B47189)鼠标滚轮用法,F1到F12功能键的功能切换以及其他技巧
入手小红点蓝牙键盘(ThinkPad Compact Bluetooth),手感极佳,小红点特别适合程序员工作,双手无需离开键盘就可以操作鼠标,完全解决肩部.腕部疲劳酸痛问题,程序员健康的大福音! 使 ...
- Word F1~F12 功能快捷键用法大全
F1:帮助 在Word中使用F1功能键,可以获取帮助. F2:移动文字或图形 F2按键可以移动文字和图形.选中文本,按下F2,然后将光标定位到你想移动到的地方,按下回车,即可移动. F3 :自动图文集 ...
- 尝试在你浏览器的Console(F12)中运行一下,你会发现页面被不同的颜色块高亮了(css调试中学到的js)
现在到处都是JavaScript,每天都能知道点新东西.一旦你入了门,你总能从这里或是那里领悟到很多知识. 一旦我发现一些有意思的东西,我喜欢去感觉他们的源代码,看一看它是怎么办到的. 今天我想分享A ...
- idea使用心得(1)-快捷键用法
快捷键: Ctrl+F12,可以显示当前文件的结构,Alt+7,可在左侧生成固定框体控件,适合类复杂的情况 Ctrl+Alt+O,优化导入的类和包 Ctrl+X,删除行 删除光标所在的哪一行,对尤其是 ...
- 学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
- 学习javascript基础知识系列第三节 - ()()用法
总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...
随机推荐
- CF1200A
CF1200A 解法: 给出长度为n的字符串,字符串由'L'.'R'以及数字0~9组成.旅馆有10间房子,L代表客人从左边入住,R代表客人从右边入住,数字则表示第i间房子客人退房了.问经过这n次操作后 ...
- iOS开发系列--地图与定位总结
现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.例如你到了一个陌生的 ...
- nginx 配置 nodejs 反向代理
upstream my_nodejs_upstream { server ; keepalive ; } server { listen ; server_name www.my-website.co ...
- Jmeter Web 性能测试入门 (七):Performance 测试中踩过 Jmeter 的坑
脚本运行的过程中,大量request抛error,但没有地方能够查看request是因为什么error的. 原因:Jmeter默认禁掉了运行过程中每个request的具体response信息收集,只保 ...
- set serveroutput on 命令
使用set serveroutput on 命令设置环境变量serveroutput为打开状态,从而使得pl/sql程序能够在SQL*plus中输出结果 使用函数dbms_output.put_lin ...
- git撤销某次提交
1.查询提交记录.进入目录,查看某人在此目录下的commit: panxi@ww-bj-panxi MINGW64 [path]/Business (feature/v2.3) $ git log f ...
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_03-freemarker测试环境搭建
新建一个module 选择parent test-freemarker spring‐boot‐starter‐freemarker:spring boot 提供的关于 freemaker的相关的包 ...
- 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_12-删除页面-服务端-接口开发
删除页面 api里面定义接口 返回类型是ReponseResult @ApiOperation("删除页面") public ResponseResult delete(Strin ...
- Python将多个excel表格合并为一个表格
Python将多个excel表格合并为一个表格 生活中经常会碰到多个excel表格汇总成一个表格的情况,比如你发放了一份表格让班级所有同学填写,而你负责将大家的结果合并成一个.诸如此类的问题有很多.除 ...
- 使用 Metrics.net + influxdb + grafana 搭建项目自动化监控和预警方案
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_25042791/article/d ...