xunaa 5.1 常见的抓包工具
目前常见的HTTP抓包工具如图5-1所示。
图5-1 常用抓包工具
5.2 浏览器开发者工具
浏览器都带有开发者工具，可以用来抓包，很受开发者欢迎。浏览器开发工具比Fiddler 拥有更广泛的受众，因为它们方便且无需设置。下面我们用Chrome浏览器来讲解。
5.2.1 调出开发者工具
研究开发人员工具的方法有多种。
方法一：按F12调出（很多人称这个工具为F12）。
方法2：在浏览器中右键单击并选择“检查”。
方法三：在浏览器中按快捷键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请求
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是一款付费软件。如果不付费，则需要每30 分钟重新启动一次Charles。
5.4.2 在Charles中安装根证书
在Charles 中安装根证书的步骤如下。
步骤1：点击菜单栏帮助SSL代理安装Charles根证书，如图5-8所示。
步骤2：此时会弹出根证书界面，点击“添加”按钮，如图5-9所示。
步骤3：证书添加成功，如图5-10所示。
图5-8 安装证书（一）
图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请求，右键选择Trace FlowTCP Flow，如图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_key\sslog.log，如图5-18所示。注意后缀必须是log，这样文件中才会存储浏览器和服务器SSL协商好的关键信息。
图5-18 新建环境变量
步骤2：在CMD中运行以下命令，
'C:\Program Files (x86)\Google\Chrome\Application\chrome.exe' --ssl-key-log-file=c:\ssl_key\sslog.log 运行成功后可以看到密钥文件已经生成，如图5-19所示。
图5-19 密钥文件
步骤3：在Wireshark中配置密钥文件，选择EditPreferencesProtocolsTLS，如图5-20所示。
图5-20 配置密钥文件
第四步：重启Chrome，然后在Chrome中访问https://www.cnblogs.com/tankxiao。此时即可捕获HTTPS包，如图5-21所示。
图5-21 使用Wireshark捕获HTTPS
5.6 本章小结
本章介绍除Fiddler之外的其他常见抓包工具。浏览器开发工具最常用于数据包捕获。 Fiddler是Windows上抓包的首选。 Fiddler 无法在Mac 计算机上使用。你可以使用查尔斯. Fiddler 和Charles 是专门为捕获HTTP/HTTPS 而设计的。 Wireshark主要用于捕获TCP/UDP或其他协议数据包，但不捕获HTTP。
用户评论
除了Fiddler，还有哪些抓包工具好用？
有14位网友表示赞同！
终于找到一篇介绍抓包工具的文章，感谢分享！
有13位网友表示赞同！
除了Fiddler，还有哪些抓包工具适合新手使用？
有10位网友表示赞同！
除了Fiddler，还有其他功能更强大的抓包工具吗？
有18位网友表示赞同！
文章写得不错，介绍了几个常用的抓包工具，收藏了！
有20位网友表示赞同！
抓包工具有哪些，除了Fiddler之外，还有哪些呢？
有7位网友表示赞同！
Fiddler很好用，但是想了解一下其他抓包工具，有没有推荐？
有14位网友表示赞同！
抓包工具，除了Fiddler，还有哪些好用？求推荐！
有17位网友表示赞同！
文章介绍的抓包工具很全面，值得一看！
有15位网友表示赞同！
除了Fiddler，还有哪些抓包工具可以分析HTTPS数据包？
有19位网友表示赞同！
除了Fiddler，还有哪些抓包工具可以用于移动端测试？
有7位网友表示赞同！
抓包工具这么多，除了Fiddler，还有哪些值得尝试？
有15位网友表示赞同！
除了Fiddler，还有哪些抓包工具可以跨平台使用？
有9位网友表示赞同！
除了Fiddler，还有哪些抓包工具可以支持多种协议？
有16位网友表示赞同！
Fiddler挺好用，但想找一款功能更强大的抓包工具，有没有推荐？
有10位网友表示赞同！
Fiddler之外，还有什么抓包工具可以推荐一下？
有10位网友表示赞同！
除了Fiddler，还有哪些抓包工具可以免费使用？
有17位网友表示赞同！
除了Fiddler，还有哪些抓包工具可以支持自定义脚本？
有10位网友表示赞同！
除了Fiddler，还有哪些抓包工具可以用于安全测试？
有12位网友表示赞同！
除了Fiddler，还有哪些抓包工具可以用于性能测试？
有8位网友表示赞同！