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的用法的更多相关文章

  1. 谷歌浏览器F12基本用法

    第一步:打开你想进行调试的页面,并按F12进入到调试模式 此处以百度页面为例进行功能展示 这是关于最右侧“元素选择器”的功能展示 关于第二个功能的使用,这个功能是将页面适应成手机屏幕大小, eleme ...

  2. VS2013使用技巧汇总

    1. Peek View 在不新建TAB的情况下快速查看.编辑一个函数的代码. 以前要看一个函数的实现,需要在使用的地方点击F12跳转到该函数,实际上这是很浪费时间的.VS2013Peek View便 ...

  3. 网页console console.log 用法 Chrome F12

    #########sample 0 https://www.cnblogs.com/xiaozong/p/4961929.html https://blog.csdn.net/shanliangliu ...

  4. ThinkPad紧凑型蓝牙键盘(0B47189)鼠标滚轮用法,F1到F12功能键的功能切换以及其他技巧

    入手小红点蓝牙键盘(ThinkPad Compact Bluetooth),手感极佳,小红点特别适合程序员工作,双手无需离开键盘就可以操作鼠标,完全解决肩部.腕部疲劳酸痛问题,程序员健康的大福音! 使 ...

  5. Word F1~F12 功能快捷键用法大全

    F1:帮助 在Word中使用F1功能键,可以获取帮助. F2:移动文字或图形 F2按键可以移动文字和图形.选中文本,按下F2,然后将光标定位到你想移动到的地方,按下回车,即可移动. F3 :自动图文集 ...

  6. 尝试在你浏览器的Console(F12)中运行一下,你会发现页面被不同的颜色块高亮了(css调试中学到的js)

    现在到处都是JavaScript,每天都能知道点新东西.一旦你入了门,你总能从这里或是那里领悟到很多知识. 一旦我发现一些有意思的东西,我喜欢去感觉他们的源代码,看一看它是怎么办到的. 今天我想分享A ...

  7. idea使用心得(1)-快捷键用法

    快捷键: Ctrl+F12,可以显示当前文件的结构,Alt+7,可在左侧生成固定框体控件,适合类复杂的情况 Ctrl+Alt+O,优化导入的类和包 Ctrl+X,删除行 删除光标所在的哪一行,对尤其是 ...

  8. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  9. 学习javascript基础知识系列第三节 - ()()用法

    总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...

随机推荐

  1. Mysql备份恢复方案解析

    1.全量备份和增量备份 1.1全量备份 就是对现有的数据进行全部备份,之前做的备份均可舍弃,以最新的全备为基点. a.全备所有数据库 Innodb引擎: [root@leader mysql]#mys ...

  2. tecplot 把散点绘成曲面图【转载】

    转载自:http://blog.sina.com.cn/s/blog_a319f5ff0101q6s8.html 找了好久,终于自己研究出来,如何使用tecplot绘制曲面图了 第一步:数据的整理 如 ...

  3. Java并发指南7:JUC的核心类AQS详解

    一行一行源码分析清楚AbstractQueuedSynchronizer 转自https://www.javadoop.com/post/AbstractQueuedSynchronizer#toc4 ...

  4. Flutter子组件调用父组件方法修改父组件参数

    子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数.看一下效果图 父级组件实现 在父级组件中写一个_editParentText的方法来修改组件中 ...

  5. mysql -- 清空表中数据

    删除表信息的方式有两种 :truncate table table_name;delete * from table_name;注 : truncate操作中的table可以省略,delete操作中的 ...

  6. Tomca的启动与关闭

    点击startup.bat启动,遇到一闪而过的问题,可能尚未配置JAVA_HOME 8080端口被占用导致启动失败 关闭Tomcat的三种方式 * 点击x (不推荐) * 双击shutdown.bat ...

  7. strace调试跟踪程序运行状态

    查看进程调用和执行状态  :   strace  -f -F  -o debug.log  -p   PID(某个进程ID) 参考资料: http://www.itshouce.com.cn/linu ...

  8. 依靠MySQL(frm、MYD、MYI)数据文件恢复

    该方法并不是适用于所有MySQL数据库 此次恢复是朋友那边的数据查不了了,请求我支援,出于各种心理原因,我答应试试,于是就有了这篇文章和这次经历,废话不多说.... 物理条件:宿机是Ubuntu16. ...

  9. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_2.RabbitMQ研究-RabbitMQ介绍

    开发中消息队列通常有如下应用场景: 1.任务异步处理. 将不需要同步处理的并且耗时长的操作由消息队列通知消息接收方进行异步处理.提高了应用程序的响应时间. 2.应用程序解耦合 MQ相当于一个中介,生产 ...

  10. 从MOV PC,PC;(或者ADDPC,PC,#4 )看ARM的三级流水线过程

    3级流水线如上图所示(PC为程序计数器),流水线使用3个阶段,因此指令分3个阶段执行. ⑴ 取指从存储器装载一条指令 ⑵ 译码识别将要被执行的指令 ⑶ 执行处理指令并将结果写会寄存器 以前学过的51单 ...