摘要：常用的抓包工具有當然還有其他的工具我三個都用過不過太復雜了不是太懂用抓到的信息太詳細了反而不是太容易分辨找出自己想要的內容其實是因為懶懶的學并且對網絡知識了解較少境界不夠境界到了自然會用我一般都是開發的時候用到抓包工具開發網頁自帶的就已經很

常用的抓包工具有fiddler,charles,wireshark(當然還有其他的工具)
我三個都用過,不過wireshark太復雜了,不是太懂用,抓到的信息太詳細了,反而不是太容易分辨,找出自己想要的內容(其實是因為懶,懶的學,并且對網絡知識了解較少,境界不夠,境界到了自然會用)
我一般都是開發 APP 的時候,用到抓包工具,開發 web 網頁,chrome 自帶的 network 就已經很強大,滿足需求了.
我用 window 開發時,會用 fiddler,用 mac 時,會用 charles(因為fiddler 沒有 mac 版本,恩,有 mac 版本,不過太反人類了,安裝麻煩,并且安裝了不一定能用,能用體驗性也不好,具體可以百度下 fiddler 這個軟件).感覺 fiddler 好用,主要是它的輸出信息,和 chrome 的 network 輸出信息類似,很容易就看懂,并且使用也簡單.其實 charles 使用也和 fiddler 差不多,但是以前用的時候,發現 fiddler 有漢化版,就一直用 fiddler 了 : )

我說下我以前用抓包工具的場景.
以前開發微信公眾號,領導讓我抄別人公眾號的頁面,一開始pc 版微信瀏覽器,有個右鍵另存為的功能,后面微信版本升級,該功能去掉了(沒辦法愉快的仿站了),然后就想起使用抓包工具,來捕獲請求,保存在本地.
開發 APP 時,安卓開發人員與我(后端)產生分歧,說接口調不通,并且是按照文檔來請求,傳參,返回內容與文檔不一致,我和他都檢查過代碼,確認沒問題后,問題依然存在,于是就用抓包工具分析APP 請求,到底是誰的代碼有問題.
對其他人的 APP 好奇(抱著科研,學習心態),查看別人 APP 數據,接口地址,傳參等,如果有可能,使用爬蟲抓取數據(我沒有惡意?)
以前開發安卓的同事,問我如何抓包,他想看其他人的 APP 參數是怎樣的,學習別人的接口風格(其實和第三個差不多)
現在用 rn 開發 APP,領導說首頁加載有點慢(請求數據,加載圖片等),讓我們優化,我們檢查代碼,發現代碼都是正常,于是抓包,觀察每個請求響應時間,請求順序等,尋找優化方案(比如,請求過多,圖片太大,檢查是否是網絡帶寬問題,是否與手機型號,系統有關等)

Charles 使用
第一步.安裝charles
第二步.打開 Charles,打開代理選項設置

第三步.配置 http 代理端口,配置 websocks 代理,如果不想捕獲 websocks 代理,可以不開啟 websocks 代理,然后點擊保存

第四步.開啟電腦全局代理,如果不開啟,那么只有你將指定軟件的代理配置為你電腦 ip 加端口才會捕獲到流量(端口是在第三步設置的 http proxy port)

第五步.現在就可以開始抓包啦

可以通過開啟 proxy—>選項中的start recording 開啟捕獲流量功能(上圖1號箭頭所指選項)
可以通過開啟 proxy—>start throtting 開啟節流選項(上圖2號箭頭所指選項)
可以通過開啟 proxy—>enable Breakpoints 開啟斷點功能(上圖3號箭頭所指選項)
注:

單純點擊 start throtting并不會有任何變化,需要先在proxy—> throttle Settings 進行配置,如下圖

勾選了 enable throttling ,點擊 ok,才會生效.這個一般是用來測試網絡對接口的影響.比如,測試 APP 在2G,3G,4G,wifi 下的工作情況

斷點功能我并沒有用過 : )

擊,可以清空請求記錄

第七步.開啟捕獲流量選項后,就可以看到請求記錄啦,不過,目前能看到詳細內容的是 http 請求,https 并不能看到,需要配置 ssl 證書.

點擊,help—> ssl proxying 中的 install Charles root certificale,安裝本機證書,點擊后,會打開電腦的鑰匙串功能(mac 電腦)

將 Charles 的證書設置為始終信任后,捕獲https 請求配置并未結束,還需要再配置一個地方.
打開proxy—>ssl proxying settings 選項

![圖片上傳中...]

這樣,就可以捕獲 https 請求啦
注:我理解的 Charles 捕獲 https 請求是這樣工作的,待驗證是否正確,因為在本機安裝了證書,所以,請求發出后,Charles 攔截,獲取到內容,然后將內容用 Charles 自己的證書,發送給服務端,服務端返回給 Charles,Charles 解密后,將內容再返回給實際的接口請求者. 可以這樣理解,Charles 相當于快遞公司,A需要寄快遞 給 B,A告訴Charles,charles 先驗貨,知道了A所寄物品的全部信息,然后打包發貨,B收到后,將收到后的評價告訴 Charles(好評或者差評或者意見),然后 Charles 再將 B 所說的內容告訴 A. 我們在本機安裝的 Charles 證書,相當于快遞公司的營業執照,如果沒安裝,A 不知道 Charles 是否是一個正規的快遞公司,你寄快遞肯定不能讓來路不明的人幫你寄吧.如果你沒寄過快遞,或者不了解快遞是什么,當我這段話沒說.

移動設備抓包
如果需要捕獲手機請求,需要先將手機,電腦處于同一個局域網,然后將手機的代理設置為電腦的IP+上面第三步設置的端口號(我上面截圖中設置的端口號是8888).
假設我電腦已經和我的安卓手機處于同一局域網了,并且的電腦 IP 為192.168.1.100,我在電腦上的 Charles 設置 http 代理端口為8888, 那么我在手機上設置的代理為http://192.168.1.100:8888.
設置成功后,可以打開192.168.1.100:8888查看是否設置成功,如果可以打開頁面,那么就說明,配置正確,可以使用啦.
不過這時候,你用手機請求 http 接口,是正常的,并且可以看到請求內容,但是請求 https 就會無法訪問,并且 Charles 只是有你的請求記錄,沒有請求詳情.這時候打開瀏覽器,訪問 https 網站,會提示不安全的網絡連接,無法連接到服務器.
這時候就需要在手機上安裝證書,才能正常訪問 https 接口.
點擊 help—>ssl proxying 中的 install charles root certificate on a Mobile device or remote brower

點擊后,會彈出提示框

讓你設置手機的 http 代理為你電腦的 IP+監聽端口,設置完成后用手機瀏覽器打開 http://chls.pro/ssl, 打開該網址后,會自動下載一個證書,下載完成后安裝到手機既可.這樣,手機就可以正常訪問 https 接口啦,并且電腦的 Charles 中也會記錄手機的請求.

Charles 請求記錄說明
structure選項是將請求按域名分類排列

1.上面2號區域就是域名分類,點擊可以展開
2.上面3號區域是可以切換請求記錄的不同顯示方式
overview是以統計的形式顯示該域名下的請求記錄
summary是以摘要的形式顯示該域名下的請求記錄
chart 是以圖表的形式顯示該域名下的請求記錄
3.上面4號區域是請求統計,比如,請求總數,正在請求中的數量,請求失敗的數量,連接數
4.上面5號區域是請求時間記錄,該域名下的請求開始時間,結束時間,網絡連接速度(kb/s),請求速度(kb/s),返回速度(kb/s)等
5.上面6號區域是請求數據量大小統計

1.上圖1號箭頭是指請求編號(Charles 自己對請求進行的編號)
2.上圖2號箭頭是指URL資源名稱
3.上圖3號箭頭是指 URL 地址中的域名
4.上圖4號箭頭是指http請求狀態碼
5.上圖5號箭頭是指請求類型 http請求header 中的 content-type
6.上圖6號箭頭是指請求 header 的大小
7.上圖7號箭頭是指請求的 body大小
8.上圖8號箭頭是指該次請求所花費的時間

resource所在的列代表資源名稱
timeline 代表請求所花費的時間并且用不同顏色標記出連接,請求,響應花費的時間占總請求時間的比例
total duration 是指請求總共花費的時間
sequence選項是將請求按請求時間排序以列表形式顯示

1.請求圖標,圖標可以顯示當前請求狀態或者類型
請求狀態圖標

代表請求當前正在上傳數據

代表請求當前正在等待返回

代表請求當前正在下載數據

代表請求是轉發或者重定向

代表請求失敗
請求類型圖標

代表請求類型是音樂文件 content-type 是audio/*

代表請求類型是文本 content-type 是text/*

代表請求是流 content-type 是application/*

代表請求是圖片,content-type 是 image/*

2.Code 請求狀態碼
3.Method 請求類型,get,post,put,delete 等
4.Host 主機名稱,請求的域名或者 IP
5.Path 請求的路徑,如果是 get 請求,參數也會顯示在這里面
6.Start 請求開始時間
7.Duration 請求持續時間
即如果請求已經結束,那么該時間就是請求總共花費的時間,如果請求尚未結束,則該時間就是當前已經請求的時間
8.Size 請求數據大小
9.Status 請求狀態
connected to remote host 連接遠程服務器
sending request body 發送請求數據
waiting for response 等待響應
receiving response body 接收返回數據
complete 請求完成
fail 請求失敗
10.info 如果請求類型是圖片,該列則顯示圖片的寬高

過濾器

請求記錄詳細信息
Overview概括信息

Request 請求信息

Response 返回信息

Summary 概要信息

Chart 圖表信息

Notes 筆記
可以在這里對該請求記錄內容

我在抓包時,有時候會遇到,status 為 complete,狀態碼為200,但是卻是請求失敗的,失敗原因是Client closed connection before receiving entire response
我說的不保證正確 : )