软件测试F12 的使用
F12抓包工具的结构介绍和使用(关联接口测试，自动化测试，软件测试，GUI自动化测试，开发调试，抓包分析)
江云的博客
已于 2022-10-19 23:55:08 修改
90048
收藏 8
分类专栏： 性能测试 自动化测试 文章标签： python html 服务器 javascript servlet
版权 性能测试 同时被 2 个专栏收录 8 篇文章3 订阅 已订阅 认证工作。
自动化测试 17 篇文章1 订阅 订阅专栏 目录
①打开F12的方式
②Elements元素
③Console控制台
④Source浏览器下载资源
⑤network前后端网络信息记录
⑥Performance前端性能查询
简介：很多开发、测试、产品以及其他IT行业的人员对基本工具F12不是很熟悉，所以出这篇文章希望能有更多的人熟悉和会使用F12，从而提高平时的工作效率。
目标：会使用F12工具完成我们的工作、快速熟悉F12工具、通过F12工具更好的理解前后端信息的交互。
内容: ①打开F12、②Elements、③Console、④Source、⑤network、⑥Performance
①打开F12开发者模式的两种方式
可键盘按F12或鼠标右键选检查
②Elements
这个tab页的使用，可用于页面结构分析，也可用于自动化脚本的元素定位，或者页面元素分析(元素大小，元素布局等)，选中小箭头则页面元素和Elements是双向绑定的。
③Console
打印控制台的查看，用于测试查看报错内容，前端开发编写js脚本调试前端代码，或打印分析问题。
④Source
下载的资源，查看前端下载的文件资源，如js文件，CSS文件，图片文件等等。
⑤network
网络查询(记录了前后端的交互)---重点，前后端信息通过接口传输，network记录了接口信息(请求头、请求体、响应体)
⑥Performance
前端性能，监控CPU、内存、网络、GPU等资源还有时间消耗
完结，您也可到我的主页浏览其它技术
文章知识点与官方知识档案匹配，可进一步学习相关知识
Python入门技能树首页概览200310 人正在系统学习中
江云的博客
已关注
2
8
0
专栏目录
F12抓包的使用教程
m0_54240774的博客
6707
F12的使用，测试、接口
F12抓包简单案例_瓴翎玲的博客
12-7
F12抓包原理:在电脑访问互联网之前,进行包录制 1.谷歌开发者工具(F12) 元素(Elements):页面元素查看分析,web自动化 控制台(Console):查看日志 来源(Sources):网络加载后的源码 网络(Network):网络、抓包 性能(Performance):网页性能 2....
F12抓包用于做postman接口测试的全过程解析_自动化测试君的博客-CSDN...
12-4
通过F12 抓包后我们获取到了相关的接口信息,接下来就可以用postman接口工具来进行接口的测试了。 依次把请求地址、请求方式、请求参数填入 postman 工具中,点击 Send 发送,再核对响应结果与抓包响应结果即可。这样子一个简单的接口调试就完...
F12开发人员工具如何使用、抓包、调试代码
热门推荐
骑猪游四方的博客
2万+
F12开发人员工具如何使用、抓包、调试代码 前言 提示：这里我给大家推荐360极速浏览器，这个版本的浏览器F12开发人员工具很强大，非常适合抓包和调试js代码，当然了其他的浏览器也是可以的，功能上基本都是一样的，差别不是很大。本篇文章适合0基础小白阅读。 提示：以下是本篇文章正文内容，下面案例可供参考 一、首先下载和安装浏览器 .下载安装完成后，打开浏览器，按快捷键F12或者FN+F12打开开发人员工具 打开后可以看到有很多的选项卡，虽然都是英文的但是不影响我们的操作，背过就好了，经常用到的是箭头标出
Python爬虫谷歌Chrome F12抓包过程原理解析
09-16
主要介绍了Python爬虫谷歌Chrome F12抓包过程原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
使用Chrome DevTools的F12进行前端页面性能测试（手把手教你，非常全，建议收藏）
最新发布
weixin_56502375的博客
833
普通用户如何评价一个网站的体验好不好呢？ 除了满足他的功能需求以外，用得爽不爽可能是最大的评估因素。这个爽不爽可以简单理解为快不快，好不好看，是不是符合他的操作习惯等等。而这里的快不快就是我们说的性能。
抓包工具之F12
paidaxing_dashu的博客
1万+
打开浏览器，按F12，点击Network，点开F12后再刷新页面 （响应状态码，响应数据类型，发起人，响应数据大小，响应时间）
看完就会，从抓包到接口测试的全过程解析【1500字保姆级教程】
816
目录 一、为什么抓包 二、如何抓包 三、Postman 接口测试实战 四、总结 一、为什么抓包 1、从功能测试角度 通过抓包查看隐藏字段 Web 表单中会有很多隐藏的字段，这些隐藏字段一般都有一些特殊的用途，比如收集用户的数据，预防 CRSF 攻击，防网络爬虫，以及一些其他用途。这些隐藏字段在界面上都看不到，如果想检测这些字段，就必须要使用抓包工具。 2、通过抓包工具了解协议内容 方便开展接口和性能测试 性能测试方面，性能测试其实就是大量模拟用户的请求，所以我们必须要知道请求中的协
前端-浏览器-F12-抓包文件解析-文件名字整理
weixin_44242433的博客
976
打开浏览-某个网页-F12抓包，可以看到一堆文件： 文件解释： All：所有文件 XHR：JQuery对AJax的分装文件 JS：JavaScript的脚本文件 CSS：CSS是Cascading Style Sheet的缩写，即层叠样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 .css代表CSS文件，它是一种与html语言配合使用制作网页的文件，它的作用主要是控制html文章的布局，简单的说就是控制网页的显示外观。 Img：图片 Media：媒体，通常用来放置视频文
Web端测试——F12的代码调试与抓包
software_test010的博客
1257
最近很多同学问我浏览器的F12是什么东东？是干什么用的？为了解决大家的疑问，我特意写了这篇文章，总结了F12的使用。下面的讲解，主要是以Microsoft Edge浏览器和360极速浏览器中的截图为例。（说明：下面的截图中，中文截图的是Microsoft Edge浏览器的截图，英文的是360极速浏览器的截图。）我推荐大家用360极速浏览器，它抓包比较好比较全面（和360浏览器不一样哦）；如果莫英文不好，那就用Microsoft Edge或者其他浏览器。F12：可打开浏览器的开发者工具，里面主要是web页面的
F12开发者工具
Maverickps的博客
8854
F12简结，前端开发，测试
F12用法2---谷歌浏览器中，抓包--导入postman做接口测试，模拟发送请求
qq_38774523的博客
556
postman一键导入，做接口测试
07-谷歌 Chrome F12 抓包分析
AI悦创·编程私教1v1
3124
浏览器打开网页的过程就是爬虫获取数据的过程，两者是一样一样的。浏览器渲染的网页是丰富多彩的数据集合，而爬虫得到的是网页的源代码 html。 有时候，我们不能在网页的 html 代码里面找到想要的数据，但是浏览器打开的网页上面却有这些数据。这就是浏览器通过 ajax 技术异步加载（偷偷下载）了这些数据。 同学们禁不住要问：那么该如何看到浏览器偷偷下载的那些数据呢？ 答案就是谷歌 Chrome 浏览器的 F12 快捷键，也可以通过鼠标右键菜单“检查”（Inspect）打开 Chrome 自带的开发者工具，开发者
web测试抓包基本功——使用Google的F12
weixin_50782026的博客
6292
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
F12抓包工具
MJ_user的博客
3004
F12抓包工具是浏览器自带的一个抓包工具 它比较方便，也比较灵活，所以我们工作中会经常用到 当我们访问某些网站有异常的时候， 通过F12抓包工具抓取报文分析具体问题， F12主要针对的是HTTP协议和HTTPS协议， 它可以确认我们的网络数据包的一个状态， 以及通过分析请求报文和响应报文里面的一个内容， 从而分析出来请求数据和响应数据是否正确， 也可以分析处理问题是前端问题还是后端问题。 ...
使用抓包工具fiddler和apipost进行接口测试
海淀码农
1089
一、进行接口测试准备的东西 1.接口测试工具：apipost、jmeter等 2.接口文档，没有接口文档就用接口信息获取工具 3.接口信息收取工具：fiddler抓包工具、浏览器开发者工具（f12）等 二、web接口测试需要获取的东西 web接口测试需要知道的三个条件 1.请求方式：get、post、put、patch、delete等 2.url地址：分为http请求和https是请求，如：www.baidu.com和www.baidu.com 3.body传递的参数：一般是以json的格式传递参数如：“n
F12 network header(网络请求）各项属性详解
realzuile的博客
5569
上图为network header示例 General部分: Request URL:资源的请求url Request Method:HTTP方法 Status Code:响应状态码 200(状态码) OK 301 - 资源（网页等）被永久转移到其它URL 404 - 请求的资源（网页等）不存在 500 - 内部服务器错误 Response Headers: Content...
看完就会，从抓包到接口测试的全过程解析
软件测试技术交流分享
644
Web 表单中会有很多隐藏的字段，这些隐藏字段一般都有一些特殊的用途，比如收集用户的数据，预防 CRSF 攻击，防网络爬虫，以及一些其他用途。这些隐藏字段在界面上都看不到，如果想检测这些字段，就必须要使用抓包工具。...
谷歌浏览器F12（开发者工具） -----功能介绍
啊Sei的博客
2171
有很多测试小伙伴不是很熟悉，测试调试时使用最多的功能页面是：元素（ELements）、控制台（Console）、源代码（Sources）、网络（Network）等
【爬虫必备】安装和使用Xpath、正则表达式插件 以及 F12的抓包流程
面向生活编程
1384
本文以谷歌浏览器为例子，本文只用到了Xpath,正则,爬虫可以有css选择器的插件,可自己操作一下css选择器的下载使用 目录1. 安装Xpath插件2. 使用Xpath插件3. 安装正则表达式插件4. 使用正则表达式插件 1. 安装Xpath插件 打开谷歌浏览器这里，打开扩展程序。 点击这里，进入谷歌插件应用中心 在这里搜索Xpath 我自己喜欢用这个，点击进去 进行安装 这样就安装成功了 点击这个按钮，把xpath固定在输入框的右侧，方便使用的时候调用这个插件。 这样就安装成功了。 .
浏览器F12（开发者调试工具） 功能介绍
qq_40813329的博客
1073
浏览器F12（开发者调试工具） 功能介绍
————————————————
版权声明：本文为CSDN博主「江云的博客」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45812996/article/details/126696992
