除了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個請求?？偟木W頁響應時間是682毫秒，性能非常好。
5.2.3 用Chrome捕獲12306登錄的POST請求Chrome開發者工具在抓包時，如果頁面發生了跳轉，那么會把上一個頁面的HTTP請求清空。此時需要選中Preservelog，以保留上次抓到的包。
我們用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抓包工具如果要在macOS系統中使用抓包工具，我們可以用Charles。Charles的工作原理與用法和Fiddler有點類似。
5.4.1 Charles工具的安裝及使用***Charles與其他工具的安裝過程大致相同，按照頁面提示操作即可。Charles安裝成功后，圖標是一個花瓶，所以俗稱青花瓷。Charles是收費軟件，如果不付費的話，每隔30分鐘，需要重啟Charles。
5.4.2 在Charles中安裝根證書在Charles中安裝根證書的步驟如下。
第1步：依次單擊菜單欄中的Help→SSLProxying→InstallCharlesRootCertificate，如圖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、macOS、Windows等多個平臺上進行網絡協議的抓包工作。同時，它也是一個開源軟件。如果想捕獲TCP3次握手協議，就應該使用Wireshark。
Wireshark的抓包原理是嗅探網卡，所以Wireshark只能查看數據包，不能修改數據包。
5.5.1 Wireshark捕捉HTTPWireshark捕捉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捕獲HTTPSFiddler和Charles都需要安裝證書后才能捕獲HTTPS，用Wireshark捕獲HTTPS更麻煩。
某些瀏覽器支持將TLS會話使用的對稱密鑰保存在外部文件中，以供Wireshark加密使用。本節測試使用的是Chrome71版本和Wireshark5.0版本。捕獲步驟具體如下。
第1步：配置系統變量。變量名為SSLKEYLOGFILE，變量值為C:ssl_keysslog.log，如圖5-18所示。注意后綴名一定要用log，這樣瀏覽器和服務器SSL協商的密鑰信息才會存儲到文件中。
圖5-18 新建環境變量
第2步：在CMD中運行以下命令，
"C:ProgramFiles(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開發人員閱讀。
