目录
1 网络资源和URL介绍
1.1 网络资源
1.2 URL介绍
2 网络传输协议
2.1 HTTP
2.1.1 http请求
2.1.1.1 请求行
2.1.1.2 请求头
2.1.1.3 请求体
2.1.2 响应
2.1.2.1 响应行
2.1.2.2 响应头
2.1.2.3 响应体
3 F12查看页面网络数据包
4 Charles抓取数据包
4.1 抓包
4.2 Charles
4.2.1 介绍
4.2.2 使用操作
4.2.2.1 浏览器设置代理
4.2.2.2 Charles开启代理
4.3 前后端bug定位
4.4 模拟弱网测试：模拟带宽比较低的网络测试延迟
4.5 异常数据测试：绕过界面直接测试服务器
5 抓取HTTPS的数据包
5.1 Web端抓HTTPS的数据包
5.2 手机端抓取HTTP的数据包
5.3 手机端抓取HTTPS的数据包
1 网络资源和URL介绍
1.1 网络资源
1、利用网络可以获取任何任何信息资源
eg：浏览器输入百度域名，就可以打开百度的首页
2、资源通过URL表示
1.2 URL介绍
1、URL：(Uniform Resource Locator)统一资源定位符，用来表示网络中资源存放的位置
2、URL的组成：
（1）协议（必）：按照什么规则通信的应用服务。用 :// 分隔
- eg：HTTP（超文本传输协议，除了传输文字之外其他都能传输的一种）、HTTPS（加密的传输，访问网页一般默认转成https给你数据加密）
- 【扩展：传输文件有FTP，远程访问SSH】
（2）域名或主机（必）：访问的资源服务器的IP或域名。
- eg：www.baidu.com
- www表示万维网（即互联网），jd表示指定某一个服务器，com代表是一个商业还是什么类型的，为了人好记才发明的域名
- IP地址和域名的关系：计算机之间互相通讯只认IP地址（IP：xxx.xxx.xxx.xxx），代表计算机在网络中的位置
- 域名的背后对应唯一的IP地址：即www.baidu.com对应唯一的IP地址，通过翻译者DNS来进行翻译
（3）端口（必）：标识特定的应用程序/服务，程序通信的出入口。一般浏览器访问的时候不显示端口号
- eg：HTTP默认端口80（:80），HTTPS默认端口443（:443）
- 端口一般和提供的服务有关，通常是数据通信相关的服务：web服务（本质上是web服务对应的软件系统）
（4）资源路径（可选）：存放的具体路径，用 / 进行分隔
（5）查询参数（可选）：请求携带的参数。通过？进行分隔，多个参数之间通过&符号连接（参数名=参数值）
eg：https://www.baidu.com
①一般使用默认的端口号（:443）且不显示 ②找到html的文件 ③用？分隔查询参数q=手机
3、URL表示形式：
协议://hostname[:port]/path/[?查询参数1&查询参数2]
2 网络传输协议
1、协议：网络中数据传输遵循的规则
常见协议：HTTP/HTTPS、SSH、FTP等
2.1 HTTP
1、HTTP(Hyper Text Transfer Protocol)：超文本传输协议（超越文字和数字，一般指代图、视频、音频、动画），网络中传输类似于网页类型的文档的协议
2、HTTP访问过程
①HTTP请求：请求行、请求头、请求体
②HTTP响应：响应行、响应头、响应体
3、http请求
①请求行：请求数据包的第一行内容
②请求头：从第二行到空行之间内容
③请求体：空行下方的内容
4、http响应
①响应行：响应数据包第一行内容
②响应头：从第二行开的到空行之间内容
③响应体：空行下方的内容
2.1.1 http请求
2.1.1.1 请求行
1、位置：HTTP请求的第一行
2、作用：描述请求的方法、URL、协议版本信息
3、请求方法作用：按照什么方式操作资源
4、常见的HTTP请求方法：
①GET：从服务器获取资源（查）
②POST：在服务器新建一个资源（增）
③PUT：在服务器更新资源（改）
④DELETE：从服务器删除资源（删）
2.1.1.2 请求头
1、位置：HTTP请求的第二行到空行之间
2、作用：描述请求客户端的属性信息（我是啥啥啥服务器给你发的内容是啥类型）
3、请求头的Content-Type（内容类型）：表示请求体里数据的数据类型，即表示给服务器发消息带了什么样的数据（可以看到页面的数据类型）
- text/html：HTML格式
- text/plain：纯文本格式
- image/jpeg：jpg图片格式
- application/json：JSON数据格式（键值对）
- application/x-www-form-urlencoded：表单默认的提交数据格式（页面的输入块、单选框、复选框叫表单）
- multipart/form-data：表单中进行文件上传时使用
2.1.1.3 请求体
1、位置：空行下面的内容
2、作用：描述请求携带的数据
3、请求体：
- 表示传输的数据（不是所有方法都带）；
- 只有在post和put方法中使用，配合请求头Content-Type（可以看到页面具体写的数据是啥）
2.1.2 响应
2.1.2.1 响应行
1、位置：HTTP响应的第一行
2、作用：描述服务器的处理结果
3、常见响应状态码（三位数字组成）：
①2xx：成功（资源访问一定能成功）
②3xx：重定向（资源访问可能成功也可能失败，见得少）
- 重定向：表示第一次请求中资源位置发生变化，服务器发现客户端用旧的位置找服务器，服务器给客户端回一个新的地址，让客户端用新地址找服务要，所以又来进行第二次请求
- eg：比如原来文件在d盘放，现在挪到e盘，你还找我在d盘要，我告诉你位置发生变化了（生成响应状态码），客户端会自动拿我给你的一个新的地址重新给我发送一次请求
③4xx：客户端错误（资源访问一定失败）
- 客户端发送的数据有问题，在请求里的行、头、体出现任何一个错误都有可能出现开头的响应状态码
④5xx：服务器错误（资源访问一定失败）
- eg：比如客户端找服务器要资料，服务器这会处理不了，就会回一个5开头的信息
常见的HTTP响应状态码：
eg：协议版本+状态码200+结果描述OK
2.1.2.2 响应头
1、位置：HTTP响应第二行到空白行
2、作用：描述服务器属性信息（比如客户端你好，我是什么什么服务器，我给你回的是什么类型的消息）
3、组成：由键值对组成
2.1.2.3 响应体
1、位置：HTTP响应空白行以下
2、作用：服务器返回的数据
3、数据类型：有图片、json（"键":值）、HTML（设计前端的源代码）、xml等
3 F12查看页面网络数据包
1、F12抓取指定的URL的登录接口，获取HTTP请求数据
- 标头：主要看行和头
- 负载：请求体的东西
- 响应：响应体的东西
2、把上一个数据包清空，再进行操作获取新的数据包
4 Charles抓取数据包
4.1 抓包
1、抓包（packet capture）：使用工具抓取客户端与服务器交互数据包（也称传输信息、报文）的操作，即在客户端和服务端之间设置网络代理，抓取客户端和服务端之间传输的数据信息
2、常见抓包工具：F12（浏览器），Charles（支持Windows、Mac、Linux），Fiddler（主要针对Windows）、wireshark（网卡、数据链路层，更专业计算机网络）等
3、为啥抓包？【场景】
- 定位前后端bug（最常见）
- 模拟弱网测试（抓包工具模拟网络信号弱的场景下进行测试）
- 绕过界面限制进行测试，即绕过界面做后端接口测试【页面级别的异常数据】（页面的数据前端做了限制，要确保后台是否有限制，所以需要做）
- 模拟服务端进行mock测试【接口测试阶段会有】
4、如何区分前后端bug？
①如果抓不到请求或请求有误是前端问题；
②如果有请求且正确但是没响应或者响应错误，那就是后端的问题；
③如果抓包有请求也有响应且都正确，但是页面显示还是报错了，则还是前端问题（页面渲染）。
5、怎么抓包
web为例：
- 浏览器设置网络代理：安装了抓包工具的电脑IP
- 打开抓包工具开启抓包，操作浏览器，最后获取抓取的数据包
4.2 Charles
4.2.1 介绍
1、Charles基本信息：
Charles是一款在Windows/Mac下常用的数据包截取工具，支持Web/APP端网络数据包的抓取分析。
中文名叫青花瓷，它是一款基于HTTP协议的代理服务器，通过成为电脑或者浏览器的代理，然后截取请求和请求结果达到分析抓包的目的。
2、 抓包原理：在客户端和服务端之间设置网络代理
3、官方下载地址:https://www.charlesproxy.com/（30天免费试用）
4.2.2 使用操作
建议：以Firefox浏览为主
4.2.2.1 浏览器设置代理
1、在浏览器设置代理，Charles默认端口8888（只有安装时做一次，以后都不用做）
2、关闭Charles后不能打开网页
3、启动Charles后能够打开网页
4.2.2.2 Charles开启代理
1、检查是否开启HTTP代理（没有开启的话，勾选确定即可）
2、打开已设置过代理的浏览器去访问地址，就可以直接抓包了（建议先用以下地址访问）
eg：
搜索列表http://hmshop-test.itheima.net/Home/Goods/search.html?q=手机
传智播客传智播客http://121.43.169.97:8081/3、打开Charles
左侧：
右侧：
4.3 前后端bug定位
1、为啥抓包可以定位bug？
后台有数据库服务，页面的信息都在数据库，后台给数据给错，页面没问题，后台给对，放页面是错的
2、定位bug的思路：
①确认请求是否有问题，请求有问题-->是前端
②确认响应是否有问题，响应有问题-->是前端
- 注意：如何确定响应的问题？
- 看返回的数据和数据库是否一致，一致-->则响应没问题，不一致-->则响应有问题
③请求和响应都没问题，但页面显示错-->前端
eg：
（1）定位该bug的步骤：
①通过浏览器访问地址去工具上看是否能抓到数据包
②性别是个人信息，登录成功才能看到个人信息，所有确定要抓登录的包
③看请求，找登录的包看请求体是否和页面数据一样，如果输入的和抓到的数据一样说明请求的数据没错
④看响应，借助数据库看响应体（响应体里有后台给的性别信息），发现和响应体的数据一样
⑤综上，那就是前端的bug（请求没问题，响应没问题，那就是前端渲染的问题）
（2）如果请求的数据和页面输入的数据不一样（发送的时候就已经错了），那是谁的问题？
答：前端
（3）如果后台返回的数据和数据库里的不一样，那是谁的问题？
答：后端
4.4 模拟弱网测试：模拟带宽比较低的网络测试延迟
1、弱网延时和带宽设置-->模拟不同网络
2、参数设置：
①设置网络带宽
②操作对应页面/APP应用
③Charles查看延迟时间/趋势变化
④确认应用程序是否有异常
- 上行：往外传
- 下载：往内传
- 存储数据：Byte 字节
- 传输数据：bit 比特位
- 1GB=1024MB 1MB=1024KB 1KB=1024Byte 1Byte=8bit
- bit/s=bps（bit per second）
- 1000Mbps=1000/8MBps=125MB/s
3、具体测试步骤：
①不开启弱网，用正常网络访问页面，抓取对应数据包查看传输时间【Duration】
②设置好弱网参数后，开启弱网，再次访问上述同一页面，抓取对应数据包查看传输时间
③对比两次访问的【Duration】实现变化，弱网情况下有延迟，且页面不能出现崩溃
- 规则判断：以产品要求提供的数据为准
- eg：某电商系统首页进入在3G网络下8s完成，且页面不出现无响应、崩溃等问题视为通过
eg：弱网后发现时间拉长了
需求：模拟3G网络带宽，访问tpshop首页，查看延时多少?是否有异常?
一个根目录表示一个页面，第二个根目录表示第二个页面
4.5 异常数据测试：绕过界面直接测试服务器
1、本质：测服务器的接口
2、假设页面做拦截校验了，测试接口有没有做校验
3、详细操作步骤：
eg：购物车商品数量有上限200的限制，页面无法输入201（说明页面进行校验了，不代表接口做拦截校验了），可以绕过页面做服务端测试
设置：
（1）打开浏览器输入待测地址
（2）在Charles的 Proxy-->Breakpoints（设置断点）：
- 勾选:Enable Breakpoints
- 点击:Add添加设置断点的URL信息 （可设置：'protocol'、'host'、'request'、'response'）
（3）确认：设置完成后点击OK
（4）在浏览器模拟用户进行操作测试（保证打开当前页面并打开断点）
（5）Charles开始抓取到当前数据包并闪烁提示（红色向上箭头表示拦截到数据包）
（6）在Charles的Breakpoints 修改请求的数据-->点击Execute
（7）在Charles的Breakpoints修改响应的数据-->点击Execute(注:可跳过修改响应，直接执行)
（8）弹出的断点数据包含一路Execute执行完毕最后点击关闭断点按钮
示例结果：
①前端按钮做限制，输入块没做限制
②前端不考虑则绕过前端，通过断点拦截前端，后端也没做校验说修改成功
5 抓取HTTPS的数据包
HTTPS：安全超文本传输协议
5.1 Web端抓HTTPS的数据包
注意：一定要安装证书才可以，https属于加密传输
5.2 手机端抓取HTTP的数据包
1、注意：
移动端抓包的前提，代理服务器必须和移动端设备在一个局域网
一般通过连接同一个WiFi解决（与安装了Charles代码的电脑，手机接入同一热点即可）（不能用移动网络抓，难以控制中间的路由）
2、具体步骤
（1）手机端WiFi设置：给手机连接的WiFi设置代理，填入安装了Charles的电脑的IP地址（IPv4地址），端口号一般是8888，然后保存
（2）操作手机APP/打开手机浏览器访问显示抓包信息【抓取http的数据包】
5.3 手机端抓取HTTPS的数据包
注意：
1、移动端设备如果是Android 7.0及以上版本（做了安全处理），需要root权限安装Charles证书
- 参考资料:https://cloud.tencent.com/developer/article/1490033
2、移动端设备如果是iOS 10.0及以上版本，需要在 设置-通用-关于 里面开启Charles证书信任
- 如果iOS手机设置证书信任后不生效，可以重启手机重试一遍
1、Android手机安装Charles证书
（1）下载Charles证书到本地电脑
（2）以hash值的形式重命名证书（为了证书能够安装到系统下使用）
- 电脑安装openssl工具，如：Win640penSSL-3_3_1. exe
以管理员身份安装：
（2）安装到open ssl路径下：
（4）注意：弹出页面直接关闭即可
（5）电脑配置环境：openssl
添加环境变量：openssl安装路径\bin
注意：这里是自己的openssl的安装路径
（6）在Windows终端测试环境变量
（7）上传重命名之后的证书到手机：
注意：模拟器要开（模拟器没有权限写入），手机可以直接上传
设置为有写入系统权限：
开启adb的root权限：
获取完之后可能显示：
