花瓶抓包 charles抓包工具
除了Fiddler工具，还有其他工具来捕获包。本章介绍了其他几种常见的抓包工具。5.1常用抓袋工具当前常见的HTTP数据包捕获工具如图5-1所示。图5-1常用抓包工具5.2浏览器开发工
除了Fiddler工具，还有其他工具来捕获包。本章介绍了其他几种常见的抓包工具。
5.1常用抓袋工具
当前常见的HTTP数据包捕获工具如图5-1所示。
图5-1常用抓包工具
5.2浏览器开发工具
所有浏览器都自带一个开发者工具，可以用来抓取包，很受开发者欢迎。浏览器工具的受众比Fiddler更广，因为方便，不需要设置。我们用Chrome浏览器来解释一下。
5.2.1调用开发工具
有几种方法可以研究开发人员工具。
1:按F12调出(很多人把这个工具叫F12)。
2:在浏览器中，单击鼠标右键，选择“检查”。
3:在浏览器中，按快捷键Ctrl+Shift+I。
5.2.2用Chrome测试网页加载时间
使用Chrome的开发者工具测试网页的加载时间如下。
(1)打开Chrome浏览器，然后打开开发者工具，选择网络选项卡。
(2)当访问一个网站时，比如www.cnblogs.com/tankxiao,开发者工具可以捕获所有HTTP请求，如图5-2所示。
图5-2网页加载时间
从图5-2中，我们可以看到单个请求的响应时间。我们可以看到这个网页已经发出了49个请求。总的网页响应时间为682毫秒，性能非常好。
5.2.3用Chrome捕捉12306登录的POST请求
开发者工具抓取包时，如果页面跳转，会清除上一页的HTTP请求空。此时，您需要检查Preserve log以保存您捕获的最后一个包。
我们使用Chrome来捕获12306的登录请求，该请求使用POST。具体步骤如下。
(1)在登录页面输入用户名和密码，选择图片验证码后点击“登录”按钮。
(2)在开发者工具中可以看到登录时发送的一系列请求。
(3)选择HTTP请求，在Headers页签中可以看到该请求中的用户名和密码，如图5-3所示。
图5-3捕捉12306登录的包
5.2.4用Chrome测试接口的响应时间
如图5-4所示，每个请求的响应时间将显示在Chrome中。
图5-4单个请求的响应时间
过滤请求
由于可操作界面较小，查找HTTP请求不方便，一般需要过滤功能。
Chrome工具具有强大的过滤功能，允许用户根据关键词进行过滤，如图5-5所示。
图5-5按关键字过滤
在过滤输入框中输入method:POST，过滤POST方法的HTTP请求，如图5-6所示。
图5-6根据HTTP方法过滤
5.3 vConsole
微信小程序、手机版网页H5、手机app也需要调试bug，可以通过第三方工具vConsole来完成。VConsole是一个轻量级和可扩展的前端开发者调试面板，用于移动网页。其用法类似于浏览器开发者工具。VConsole如图5-7所示。
图5-7虚拟控制台工具
5.4查尔斯袋捕手
如果要使用mac OS系统中的包捕获工具，我们可以使用Charles。Charles的工作原理和用法和Fiddler有些类似。
5.4.1查尔斯工具的安装和使用
Charles的安装过程和其他工具一样，只需按照页面上的说明操作即可。查尔斯成功安装后，图标是一个花瓶，所以俗称青花瓷。查尔斯是一个付费软件。如果不付费，需要每30分钟重启一次查尔斯。
5.4.2在Charles中安装根证书
在Charles中安装根证书的步骤如下。
第一步:点击菜单栏中的帮助→ SSL代理→安装查尔斯根证书，如图5-8所示。
第二步:此时会弹出一个根证书界面。点击【添加】按钮，如图5-9所示。
第三步:证书添加成功，如图5-10所示。
图5-8安装证书(1)
图5-9安装证书(2)
图5-10证书添加成功
第4步:双击证书打开证书配置文件，并将证书设置为信任，如图5-11所示。
图5-11证书设置为信任
查尔斯配置规则
查尔斯的配置规则如图5-12所示。其中包括:
Host为配置域名，*表示任意匹配；Port为网页浏览端口号，这里填443。
图5-12设置规则
5.4.4捕获Charles的网站登录请求
打开Charles，然后用浏览器打开一个网站并登录。您可以看到为找到的HTTP请求登录时发送的用户名和密码，如图5-13所示。
图5-13捕获网站的登录请求
5.5 Wireshark捕袋器
Wireshark是一款非常流行的网络数据包分析软件，功能强大。它可以拦截各种网络数据包，并显示网络数据包的详细信息。是一款跨平台的软件，可以在UNIX系列、Linux、mac OS、Windows等平台上捕获网络协议。同时，它也是一个开源软件。如果要捕获TCP三次握手协议，应该使用Wireshark。
Wireshark的数据包捕获原理是嗅探网卡，所以Wireshark只能查看数据包，不能修改。
5.5.1 Wireshark捕获HTTP
Wireshark捕获HTTP协议的方式如下。
步骤1:启动Wireshark。这时候就会出现很多网络连接。选择一个正在使用的，如图5-14所示。
图5-14选择网卡
步骤2:输入过滤条件“HTTP ”,以便只捕获HTTP协议。当您在浏览器中访问http://files-cdn.cnblogs.com/files/TankXiao/http.bmp时，Wireshark可以捕获HTTP消息。HTTP请求和HTTP响应是分开的。HTTP请求有一个右箭头，HTTP响应有一个左箭头，如图5-15所示。
图5-15捕获HTTP数据包
第三步:选择HTTP请求，点击右键，依次选择跟踪流→TCP流，如图5-16所示。
图5-16选择"跟踪流程"
第四步:打开一个对话框，可以看到完整的HTTP请求和HTTP响应，如图5-17所示。
图5-17查看完整的HTTP请求和HTTP响应
5.5.2用Wireshark捕获HTTPS
Fiddler和Charles都需要在捕获HTTPS之前安装证书。用Wireshark捕获HTTPS更麻烦。
有些浏览器支持将TLS会话使用的对称密钥保存在Wireshark加密的外部文件中。该部分使用Chrome版本71和Wireshark版本5.0。捕获步骤如下。
步骤1:配置系统变量。变量名为SSLKEYLOGFILE，变量值为c: SSL _ keyslog.log，如图5-18所示。请注意，后缀名称必须是log，这样浏览器和服务器之间通过SSL协商的密钥信息将存储在文件中。
图5-18新的环境变量
步骤2:在CMD中运行以下命令，
"C:Program Files (x86)GoogleChromeApplicationchrome.exe" --ssl-key-log-file=c:ssl_keysslog.log
操作成功后，可以看到密钥文件已经生成，如图5-19所示。
图5-19密钥文件
步骤3:在Wireshark中配置密钥文件，然后选择编辑→首选项→协议→TLS，如图5-20所示。
图5-20配置密钥文件
第四步:重启Chrome，然后在Chrome中访问https://www.cnblogs.com/tankxiao。这时，你可以抓住HTTPS包，如图5-21所示。
图5-21使用Wireshark捕获HTTPS
5.6本章概述
本章介绍了除Fiddler之外的其他常见的数据包捕获工具。通常，浏览器开发工具是使用最多的。Fiddler是Windows上数据包捕获的首选，但不能在Mac电脑上使用。查尔斯可以被利用。Fiddler和Charles致力于捕获HTTP/HTTPS。Wireshark主要用于捕捉TCP/UDP或其他协议的数据包，而不是HTTP。
本文摘自刚刚上架的《HTTP报文捕获接口自动测试》。
本书内容来自作者多年从事接口测试的经验总结，贴近实际，能帮助读者解决实际工作中的难题。本书的主要内容有HTTP的基础知识；如何使用Fiddler来抓HTTP包；如何分析HTTP包；如何通过JMeter和Postman等发送HTTP包，从而实现软件自动化测试和接口的自动化测试；如何使用抓包工具来实现安全测试和性能测试等；几个日常生活中应用比较广泛的综合实例。本书图文并茂、实例丰富，方便读者参考并动手实践，适合前端开发工程师、测试工程师、线上故障技术人员、接口开发人员和Web开发人员阅读。
