活用 F12 开发者工具,测试效率原来可以提高这么多

news2025/1/17 15:16:13

推荐阅读:

[内部资源] 想拿年薪30W+的软件测试人员,这份资料必须领取~

Python自动化测试全栈+性能测试全栈,挑战年薪40W+

从功能测试进阶自动化测试,熬夜7天整理出这一份超全学习指南【附网盘资源】

什么是F12?

F12开发者工具是浏览器自带的一个开发调试工具,因为可以用F12快捷键直接启动,所以简称为F12工具。

F12工具因为有如下的特点,所以被开发和测试人员广泛使用:

1.简单轻量免安装,是浏览器内置的开发者工具,可以提供捕获浏览器的数据报文的功能;

2.作为浏览器的一部分,是数据收发的一端,抓取到的 HTTPs 报文是可以得到明文数据的,不像Fiddler和Charles等工具,需要安装证书,所以操作简单。

如何启动F12?

F12开发者工具的启动方式有很多,如下:

1)键盘按F12即可立即启动

2)鼠标右键选检查页面启动

3)在菜单里:更多工具里–>开发者工具,点击可以直接启动:**

4)Ctrl+Shift+i 快捷键启动

F12的常规设置

1.显示的位置调整

靠右、靠左、靠下、独立窗口

图片

2.设置颜色和语言(chrome)

Chrome浏览器默认是英文的,可以手动设置为中文的模式。

图片

3.手机版本的切换

适合测试H5页面和小程序测试,可以方便在电脑操作和调试;也可以选择尺寸和不同的手机型号,并且也可以自定义手机型号和列表。

图片

测试使用F12工具的主要场景

F12开发者工具是开发和测试都会经常使用的一个工具。作为软件测试需主要可以使用的场景有哪些呢?

1.项目的抓包分析和定位问题

测试主要用来进行抓包定位和分析问题。比如我们在测试项目的时候,发现了一个bug,要定位这个bug是前端bug还是后端bug,就可以通过抓包来进行分析。

F12记录了前后端的交互,可以通过看前端发送的请求和后端收到的响应,如下图所示:

图片

先找到这个报文,然后点击查看右边的请求和响应。

请求消息注意看:请求头 +请求体,特别是请求体里的请求正文,就是我们页面上传输的参数和数据,需要检查是否有问题:

在这里插入图片描述

响应消息就是服务器的返回的响应消息,重点看的也是响应体:

图片

所以,结合以上抓包信息,我们可以按照如下步骤和原则来判断和分析bug:

1.如果是明显的前端页面问题,比如js报错,那么就是前端的bug;

2.通过抓包结果来分析:

1)如果前端没有发送请求,那么是前端问题

2)前端发送请求的数据错误,那么是前端问题

3)如果后端没有给响应消息,那么是后端问题

4)如果后端响应消息数据错误 ,那么是后端问题

5)如果后端给了正确的响应,但是前端没有正确显示,那么是前端问题

当然,除了抓包分析,我们还需要配合数据库进行数据确认,以及结合Linux服务器分析项目日志来定位具体的问题。

2.F12做接口测试和数据篡改

点击菜单栏里的新请求按钮,可以打开一个新请求的编辑页面,输入请求的地址和参数、请求头,点击发送按钮即可发送接口请求。

图片

或者选中报文然后右键选择编辑并重发,也可以对这个接口数据进行修改,比如做一些异常的接口测试,检查响应结果,确认接口服务器处理结果。

图片

3.F12工具做弱网测试

大家都知道有很多工具可以做弱网测试,比如Fiddler工具,Charles工具,QNET工具等,F12开发者工具也可以做弱网测试。

如下是谷歌浏览器和火狐浏览器的弱网配置页面:

在这里插入图片描述

可以从预设置好的网络类型里选择,也可以自己定义和添加网络参数。

总结

相对于其他的抓包工具F12开发者工具的优缺点如下:

优点:

1.最简单、最轻量级的,免安装,是浏览器内置的开发者工具;
2.抓取到的 HTTPs 报文是可以得到明文数据的,不需要安装证书。

缺点:

1.因为只能抓当前浏览器的收发报文,层次只能是在应用层 Http(s)协议,不能抓取其他的数据报文;
2.F12 抓包调试也能满足我们基本的测试工作需求,但是作用面和强大性和其他的抓包工具还是有一定差距的。

测试可以使用的工具很多,但是F12开发者工具是使用最简便的,如果能灵活运用,可以让工作效率提升不少!


资源分享【这份资料必须领取~】

下方这份完整的软件测试视频学习教程已经上传CSDN官方认证的二维码,朋友们如果需要可以自行免费领取 【保证100%免费】

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/93590.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HTTP详细介绍

HTTP 内容协商 什么是内容协商 在 HTTP 中,内容协商是一种用于在同一 URL 上提供资源的不同表示形式的机制。内容协商机制是指客户端和服务器端就响应的资源内容进行交涉,然后提供给客户端最为适合的资源。内容协商会以响应资源的语言、字符集、编码方…

FS32R294JCK0MJDT功能、FS32R294KCK0MJDT特点、FS32R294KAK0MJDT雷达微控制器

S32R294的特点与优势:内置雷达信号加速单元,简称SPT2.8,是专门服务于FMCW雷达的信号处理加速单元。同时,它是16纳米Power架构的处理器,与上一代处理器有非常好的软件兼容性,软件复用率高达80%;S…

【愚公系列】2022年12月 使用NSSM工具部署ELK三件套为Windows服务

文章目录前言一、使用NSSM工具部署ELK三件套为Windows服务1.安装ElasticSearch服务2.安装Kibana服务3.安装Logstash服务4.验证ELK服务前言 nssm是一个服务封装程序,它可以将普通exe程序封装成服务,实现开机自启动,同类型的工具还有微软自己的…

计算机硬件基础

目录 一、计算机组成原理 1.计算机的组成 输入设备: 输出设备: 存储器: 运算器: 控制器: 2.总线 总线 DMA总线 二、多级存储 1.三级存储结构 Cache 主存储器 辅助存储器 2.地址空间 三、CPU工作原理概述…

Java培训Mycat全局序列

全局序列 1、本地文件方式 不推荐,如在Mycat主机中用本地文件方式创建全局序列,当这台机器宕机时会出现,序列文件丢失,造成序列冲突问题 Java培训Mycat全局序列 2、数据库方式 2.1、原理 利用数据库一个表 来进行计数累加。…

干货 | 数字经济创新创业——软件研究

下文整理自清华大学大数据能力提升项目能力提升模块课程“Innovation & Entrepreneurship for Digital Economy”(数字经济创新创业课程)的精彩内容。主讲嘉宾:Kris Singh: CEO at SRII, Palo Alto, CaliforniaVisiting Professor of Tsinghua Unive…

计算机毕设Python+Vue校园食堂订餐系统(程序+LW+部署)

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

【IntelliJ IDEA技巧】:如何生成.jar文件

问题描述: 由于上交给上级或者特殊使用,我们需要将jar文件提交给上级,那就是要学会如何生成jar文件,个人找了很久解决了问题,主要是网上太多参差不齐的回答,我觉着很浪费时间,当然有些也是比较好…

MySQL zip安装包 的安装过程

以前怎么安装的Mysql已经不记得了,感觉就是傻瓜式安装。这次又要用上了,发现和原先的记忆完全不一样了,也许是自己全忘了。这次记在这里,日后好参照,有需要的同学也可直接拿去。 1.下载,直接去官网吧 MyS…

人乳铁蛋白ELISA试剂盒操作注意事项及步骤丨艾美捷方案

人乳铁蛋白(LTF)ELISA试剂盒操作注意事项: 1.试剂应按标签说明书储存,使用前恢复到室温。稀稀过后的标准品应丢弃,不可保存。 2.实验中不用的板条应立即放回包装袋中,密封保存,以免变质。 3.不用的其它试剂应包装好…

基于Python+sqlite3实现(Web)图书管理系统【100010049】

*项目名称:图书管理系统 (LibraryManagementSystem) 一、系统目标 使用了Python作为语言,以django为后台,sqlite3作为数据库,UI基于bootstrap的图书管理系统,模拟图书管理的真实场景,考虑客观…

软件测试就业现状分析,2023是卷or润?

导读 自媒体大V卢克文11月的文章《从数据读疫情》中写道,“大约从2022年5月以后,身边的人,大量倾诉,他们的餐馆、旅行社、投资公司、运输公司出问题了,他们没钱了,每日还要还贷,他们很难过”。…

Java+MySQL基于SSM的会议交接平台的设计与实现 毕业设计

随着社会竞争压力的不断加强,企事业单位内部的会议都在不断的增加,有效的会议可以提高企事业内部的沟通,更好的做出符合战略目标的决策,但是传统的会议交接有一定的问题存在,首先就是必须面对面进行传达,其次就是对任务的安排和执行没有很好的记录,为了改变这些情况,于是我们提…

免疫佐剂CpG ODN说明——艾美捷CpG ODN 方案

免疫佐剂(immunoadjuvant),又称非特异性免疫增生剂,其本身不具有抗原性,但同抗原一起或者预先注射到机体后,能非特异性地改变机体对该抗原的特异性免疫应答。1925年Ramon首先发现在疫苗中加入某种其他物质可以提高抗原…

OpenCV-Python学习(17)—— OpenCV 图像像素类型转换与归一化(cv.normalize)

1. 学习目标 学习 OpenCV 图像像素的类型转换;学习 OpenCV 归一化函数。 2. OpenCV 图像像素的类型转换 由于【在 OpenCV-Python 中一切图像数据皆 numpy.array】,因此像素的类型转换可以直接使用 numpy 的类型转换方法。 2.1 将像素转换为 float32 i…

Windows 下 MongoDB 6 详细安装教程(图文结合)

​ MongoDB是一个基于分布式文件存储 [1] 的数据库。由C语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 ​ MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常…

为什么电子商务物流对电商商家的业务如此重要?

正是电子商务物流的推动推动了企业发展包括最大渠道在内的整体生态系统;店内提货、电子商务、分销商、经销商、合作伙伴和全球制造商,推动新客户的增长。电子商务巨头的目标是推动更多的销售并提高客户忠诚度。  无论是内部还是第三方物流公司,改进的电…

springboot simple (11) springboot protostuff

1 protostuff简介 protostuff是一个基于protobuf实现的序列化方法。 优点&#xff1a;不用写.proto文件。 2 springboot protobuf集成开发 第1步&#xff1a;pom文件引入&#xff1a; <dependency><groupId>io.protostuff</groupId><artifactId>pr…

CDGA|数据治理有哪些痛点,该如何应对呢?

数据治理核心目的,就是通过数据的治理,将数据以更加实用更加有价值的赋能使用者创造更大的价值或者是变现能力,但随之而来的问题也日益凸显。 1、数据质量良莠不齐。数据之多,使用之乱,造成的数据不一致,冗余重复等等,通常会使企业花费额外的成本。 2、数据的互联不强,缺乏统一…

95 C语言初阶练习题

CNT=函数调用的次数 do while 不管三七二十一直接进入循环 k=i+j就等于k=k(i+j)** 局部a只能在test函数内使用 &&并且 || 或者