除了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浏览器，然后打开开发者工具，选中network选项卡。

（2）访问一个网址，比如访问www.cnblogs.com/tankxiao，开发者工具能捕获所有的http请求，如图5-2所示。

图5-2　网页加载时间

从图5-2中可以看出单个请求的响应时间，可以看到这个网页发送了49个请求。总的网页响应时间是682毫秒，性能非常好。

5.2.3　用chrome捕获12306登录的post请求

chrome开发者工具在抓包时，如果页面发生了跳转，那么会把上一个页面的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　单个请求的响应时间

5.2.5　过滤请求

因为可以操作的界面较小，查找http请求不方便，所以一般都需要用到过滤功能。

chrome开发者工具具有强大的过滤功能，可以让用户根据关键字来过滤，如图5-5所示。

图5-5　根据关键字过滤

在filter输入框中输入method:post，可以过滤post方法的http请求，如图5-6所示。

图5-6　根据http方法过滤

5.3　vconsole

微信小程序、手机版网页h5、手机app也需要调试bug，此时可以用第三方工具vconsole来完成。vconsole是一个轻量、可拓展的、针对手机网页的前端开发者调试面板。其用法和浏览器开发者工具差不多。vconsole如图5-7所示。

图5-7　vconsole工具

5.4　charles抓包工具

如果要在mac os系统中使用抓包工具，我们可以用charles。charles的工作原理与用法和fiddler有点类似。

5.4.1　charles工具的安装及使用方法

charles与其他工具的安装过程大致相同，按照页面提示操作即可。charles安装成功后，图标是一个花瓶，所以俗称青花瓷。charles是收费软件，如果不付费的话，每隔30分钟，需要重启charles。

5.4.2　在charles中安装根证书

在charles中安装根证书的步骤如下。

第1步：依次单击菜单栏中的help→ssl proxying→install charles root certificate，如图5-8所示。

第2步：这时候会弹出一个根证书界面，单击“添加”按钮，如图5-9所示。

第3步：证书添加成功，如图5-10所示。

图5-8　安装证书（1）

图5-9　安装证书（2）

图5-10　证书添加成功

第4步：双击证书以打开证书简介，把证书设置为信任，如图5-11所示。

图5-11　证书设置为信任

5.4.3　charles配置规则

charles的配置规则如图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 3次握手协议，就应该使用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包

第3步：选择http请求，右键单击并依次选择追踪流→tcp流，如图5-16所示。

图5-16　选择“追踪流”

第4步：打开一个对话框，可以看到完整的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_keysslog.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中配置密钥文件，依次选择编辑→首选项→protocols→tls，如图5-20所示。

图5-20　配置密钥文件

第4步：重启chrome，然后在chrome中访问
https://www.cnblogs.com/tankxiao，此时就可以抓到https的包了，如图5-21所示。

图5-21　用wireshark捕获https

5.6　本章小结

本章介绍了fiddler之外其他常见的抓包工具。平常抓包用得最多的是浏览器开发者工具。在windows上抓包首选fiddler，在mac计算机上无法使用fiddler，可以用charles。fiddler和charles是专门用来捕获http/https的。wireshark主要用来抓tcp/udp或者其他协议的包，而不会用来抓http。

本文摘自刚刚上架的《http抓包之接口自动化测试》

本书内容来自作者多年从事接口测试的经验总结，贴近实际，能帮助读者解决实际工作中的难题。本书的主要内容有http的基础知识；如何使用fiddler来抓http包；如何分析http包；如何通过jmeter和postman等发送http包，从而实现软件自动化测试和接口的自动化测试；如何使用抓包工具来实现安全测试和性能测试等；几个日常生活中应用比较广泛的综合实例。
本书图文并茂、实例丰富，方便读者参考并动手实践，适合前端开发工程师、测试工程师、线上故障技术人员、接口开发人员和web开发人员阅读。