摘要：常用的抓包工具有當(dāng)然還有其他的工具我三個(gè)都用過(guò)不過(guò)太復(fù)雜了不是太懂用抓到的信息太詳細(xì)了反而不是太容易分辨找出自己想要的內(nèi)容其實(shí)是因?yàn)閼袘械膶W(xué)并且對(duì)網(wǎng)絡(luò)知識(shí)了解較少境界不夠境界到了自然會(huì)用我一般都是開(kāi)發(fā)的時(shí)候用到抓包工具開(kāi)發(fā)網(wǎng)頁(yè)自帶的就已經(jīng)很

常用的抓包工具有fiddler,charles,wireshark(當(dāng)然還有其他的工具)
我三個(gè)都用過(guò),不過(guò)wireshark太復(fù)雜了,不是太懂用,抓到的信息太詳細(xì)了,反而不是太容易分辨,找出自己想要的內(nèi)容(其實(shí)是因?yàn)閼?懶的學(xué),并且對(duì)網(wǎng)絡(luò)知識(shí)了解較少,境界不夠,境界到了自然會(huì)用)
我一般都是開(kāi)發(fā) APP 的時(shí)候,用到抓包工具,開(kāi)發(fā) web 網(wǎng)頁(yè),chrome 自帶的 network 就已經(jīng)很強(qiáng)大,滿足需求了.
我用 window 開(kāi)發(fā)時(shí),會(huì)用 fiddler,用 mac 時(shí),會(huì)用 charles(因?yàn)閒iddler 沒(méi)有 mac 版本,恩,有 mac 版本,不過(guò)太反人類了,安裝麻煩,并且安裝了不一定能用,能用體驗(yàn)性也不好,具體可以百度下 fiddler 這個(gè)軟件).感覺(jué) fiddler 好用,主要是它的輸出信息,和 chrome 的 network 輸出信息類似,很容易就看懂,并且使用也簡(jiǎn)單.其實(shí) charles 使用也和 fiddler 差不多,但是以前用的時(shí)候,發(fā)現(xiàn) fiddler 有漢化版,就一直用 fiddler 了 : )

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

Charles 使用
第一步.安裝charles
第二步.打開(kāi) Charles,打開(kāi)代理選項(xiàng)設(shè)置

第三步.配置 http 代理端口,配置 websocks 代理,如果不想捕獲 websocks 代理,可以不開(kāi)啟 websocks 代理,然后點(diǎn)擊保存

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

第五步.現(xiàn)在就可以開(kāi)始抓包啦

可以通過(guò)開(kāi)啟 proxy—>選項(xiàng)中的start recording 開(kāi)啟捕獲流量功能(上圖1號(hào)箭頭所指選項(xiàng))
可以通過(guò)開(kāi)啟 proxy—>start throtting 開(kāi)啟節(jié)流選項(xiàng)(上圖2號(hào)箭頭所指選項(xiàng))
可以通過(guò)開(kāi)啟 proxy—>enable Breakpoints 開(kāi)啟斷點(diǎn)功能(上圖3號(hào)箭頭所指選項(xiàng))
注:

單純點(diǎn)擊 start throtting并不會(huì)有任何變化,需要先在proxy—> throttle Settings 進(jìn)行配置,如下圖

勾選了 enable throttling ,點(diǎn)擊 ok,才會(huì)生效.這個(gè)一般是用來(lái)測(cè)試網(wǎng)絡(luò)對(duì)接口的影響.比如,測(cè)試 APP 在2G,3G,4G,wifi 下的工作情況

斷點(diǎn)功能我并沒(méi)有用過(guò) : )

擊,可以清空請(qǐng)求記錄

第七步.開(kāi)啟捕獲流量選項(xiàng)后,就可以看到請(qǐng)求記錄啦,不過(guò),目前能看到詳細(xì)內(nèi)容的是 http 請(qǐng)求,https 并不能看到,需要配置 ssl 證書.

點(diǎn)擊,help—> ssl proxying 中的 install Charles root certificale,安裝本機(jī)證書,點(diǎn)擊后,會(huì)打開(kāi)電腦的鑰匙串功能(mac 電腦)

將 Charles 的證書設(shè)置為始終信任后,捕獲https 請(qǐng)求配置并未結(jié)束,還需要再配置一個(gè)地方.
打開(kāi)proxy—>ssl proxying settings 選項(xiàng)

![圖片上傳中...]

這樣,就可以捕獲 https 請(qǐng)求啦
注:我理解的 Charles 捕獲 https 請(qǐng)求是這樣工作的,待驗(yàn)證是否正確,因?yàn)樵诒緳C(jī)安裝了證書,所以,請(qǐng)求發(fā)出后,Charles 攔截,獲取到內(nèi)容,然后將內(nèi)容用 Charles 自己的證書,發(fā)送給服務(wù)端,服務(wù)端返回給 Charles,Charles 解密后,將內(nèi)容再返回給實(shí)際的接口請(qǐng)求者. 可以這樣理解,Charles 相當(dāng)于快遞公司,A需要寄快遞 給 B,A告訴Charles,charles 先驗(yàn)貨,知道了A所寄物品的全部信息,然后打包發(fā)貨,B收到后,將收到后的評(píng)價(jià)告訴 Charles(好評(píng)或者差評(píng)或者意見(jiàn)),然后 Charles 再將 B 所說(shuō)的內(nèi)容告訴 A. 我們?cè)诒緳C(jī)安裝的 Charles 證書,相當(dāng)于快遞公司的營(yíng)業(yè)執(zhí)照,如果沒(méi)安裝,A 不知道 Charles 是否是一個(gè)正規(guī)的快遞公司,你寄快遞肯定不能讓來(lái)路不明的人幫你寄吧.如果你沒(méi)寄過(guò)快遞,或者不了解快遞是什么,當(dāng)我這段話沒(méi)說(shuō).

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

點(diǎn)擊后,會(huì)彈出提示框

讓你設(shè)置手機(jī)的 http 代理為你電腦的 IP+監(jiān)聽(tīng)端口,設(shè)置完成后用手機(jī)瀏覽器打開(kāi) http://chls.pro/ssl, 打開(kāi)該網(wǎng)址后,會(huì)自動(dòng)下載一個(gè)證書,下載完成后安裝到手機(jī)既可.這樣,手機(jī)就可以正常訪問(wèn) https 接口啦,并且電腦的 Charles 中也會(huì)記錄手機(jī)的請(qǐng)求.

Charles 請(qǐng)求記錄說(shuō)明
structure選項(xiàng)是將請(qǐng)求按域名分類排列

1.上面2號(hào)區(qū)域就是域名分類,點(diǎn)擊可以展開(kāi)
2.上面3號(hào)區(qū)域是可以切換請(qǐng)求記錄的不同顯示方式
overview是以統(tǒng)計(jì)的形式顯示該域名下的請(qǐng)求記錄
summary是以摘要的形式顯示該域名下的請(qǐng)求記錄
chart 是以圖表的形式顯示該域名下的請(qǐng)求記錄
3.上面4號(hào)區(qū)域是請(qǐng)求統(tǒng)計(jì),比如,請(qǐng)求總數(shù),正在請(qǐng)求中的數(shù)量,請(qǐng)求失敗的數(shù)量,連接數(shù)
4.上面5號(hào)區(qū)域是請(qǐng)求時(shí)間記錄,該域名下的請(qǐng)求開(kāi)始時(shí)間,結(jié)束時(shí)間,網(wǎng)絡(luò)連接速度(kb/s),請(qǐng)求速度(kb/s),返回速度(kb/s)等
5.上面6號(hào)區(qū)域是請(qǐng)求數(shù)據(jù)量大小統(tǒng)計(jì)

1.上圖1號(hào)箭頭是指請(qǐng)求編號(hào)(Charles 自己對(duì)請(qǐng)求進(jìn)行的編號(hào))
2.上圖2號(hào)箭頭是指URL資源名稱
3.上圖3號(hào)箭頭是指 URL 地址中的域名
4.上圖4號(hào)箭頭是指http請(qǐng)求狀態(tài)碼
5.上圖5號(hào)箭頭是指請(qǐng)求類型 http請(qǐng)求header 中的 content-type
6.上圖6號(hào)箭頭是指請(qǐng)求 header 的大小
7.上圖7號(hào)箭頭是指請(qǐng)求的 body大小
8.上圖8號(hào)箭頭是指該次請(qǐng)求所花費(fèi)的時(shí)間

resource所在的列代表資源名稱
timeline 代表請(qǐng)求所花費(fèi)的時(shí)間并且用不同顏色標(biāo)記出連接,請(qǐng)求,響應(yīng)花費(fèi)的時(shí)間占總請(qǐng)求時(shí)間的比例
total duration 是指請(qǐng)求總共花費(fèi)的時(shí)間
sequence選項(xiàng)是將請(qǐng)求按請(qǐng)求時(shí)間排序以列表形式顯示

1.請(qǐng)求圖標(biāo),圖標(biāo)可以顯示當(dāng)前請(qǐng)求狀態(tài)或者類型
請(qǐng)求狀態(tài)圖標(biāo)

代表請(qǐng)求當(dāng)前正在上傳數(shù)據(jù)

代表請(qǐng)求當(dāng)前正在等待返回

代表請(qǐng)求當(dāng)前正在下載數(shù)據(jù)

代表請(qǐng)求是轉(zhuǎn)發(fā)或者重定向

代表請(qǐng)求失敗
請(qǐng)求類型圖標(biāo)

代表請(qǐng)求類型是音樂(lè)文件 content-type 是audio/*

代表請(qǐng)求類型是文本 content-type 是text/*

代表請(qǐng)求是流 content-type 是application/*

代表請(qǐng)求是圖片,content-type 是 image/*

2.Code 請(qǐng)求狀態(tài)碼
3.Method 請(qǐng)求類型,get,post,put,delete 等
4.Host 主機(jī)名稱,請(qǐng)求的域名或者 IP
5.Path 請(qǐng)求的路徑,如果是 get 請(qǐng)求,參數(shù)也會(huì)顯示在這里面
6.Start 請(qǐng)求開(kāi)始時(shí)間
7.Duration 請(qǐng)求持續(xù)時(shí)間
即如果請(qǐng)求已經(jīng)結(jié)束,那么該時(shí)間就是請(qǐng)求總共花費(fèi)的時(shí)間,如果請(qǐng)求尚未結(jié)束,則該時(shí)間就是當(dāng)前已經(jīng)請(qǐng)求的時(shí)間
8.Size 請(qǐng)求數(shù)據(jù)大小
9.Status 請(qǐng)求狀態(tài)
connected to remote host 連接遠(yuǎn)程服務(wù)器
sending request body 發(fā)送請(qǐng)求數(shù)據(jù)
waiting for response 等待響應(yīng)
receiving response body 接收返回?cái)?shù)據(jù)
complete 請(qǐng)求完成
fail 請(qǐng)求失敗
10.info 如果請(qǐng)求類型是圖片,該列則顯示圖片的寬高

過(guò)濾器

請(qǐng)求記錄詳細(xì)信息
Overview概括信息

Request 請(qǐng)求信息

Response 返回信息

Summary 概要信息

Chart 圖表信息

Notes 筆記
可以在這里對(duì)該請(qǐng)求記錄內(nèi)容

我在抓包時(shí),有時(shí)候會(huì)遇到,status 為 complete,狀態(tài)碼為200,但是卻是請(qǐng)求失敗的,失敗原因是Client closed connection before receiving entire response
我說(shuō)的不保證正確 : )