我們?cè)陂_發(fā)網(wǎng)站項(xiàng)目的時(shí)候，我們可以通過(guò)瀏覽器的debug模式來(lái)看request以及response的數(shù)據(jù)，那么如果我們開發(fā)移動(dòng)端項(xiàng)目沒(méi)有網(wǎng)頁(yè)呢？如何抓取數(shù)據(jù)呢？
前幾天有個(gè)做服務(wù)端的師弟跟我說(shuō)他不用抓包工具，遇到問(wèn)題直接debug代碼，那我問(wèn)他，如果線上服務(wù)的話，你怎么調(diào)？在實(shí)際項(xiàng)目中，沒(méi)有遇到跟客戶端相互扯皮的事情嗎？我覺(jué)得很正常啊，客戶端說(shuō)他沒(méi)問(wèn)題，服務(wù)端也說(shuō)他沒(méi)問(wèn)題，到底誰(shuí)有問(wèn)題？這時(shí)候沒(méi)必要相互推脫，拿數(shù)據(jù)出來(lái)說(shuō)話才是王道。抓包工具做了什么？它把客戶端的請(qǐng)求數(shù)據(jù)，以及服務(wù)端返回的數(shù)據(jù)完完整整的抓取下來(lái)，供攻城獅分析問(wèn)題。所以首先分析問(wèn)題才是最重要的，而不是一上來(lái)就跟蹤代碼debug。
Charles
????是一個(gè)HTTP代理服務(wù)器,HTTP監(jiān)視器,反轉(zhuǎn)代理服務(wù)器，當(dāng)程序連接Charles的代理訪問(wèn)互聯(lián)網(wǎng)時(shí)，Charles可以監(jiān)控這個(gè)程序發(fā)送和接收的所有數(shù)據(jù)。它允許一個(gè)開發(fā)者查看所有連接互聯(lián)網(wǎng)的HTTP通信，這些包括request,
response和HTTP headers （包含cookies與caching信息）。
Charles主要功能:
1. 支持SSL代理。可以截取分析SSL的請(qǐng)求。
2. 支持流量控制?？梢阅M慢速網(wǎng)絡(luò)以及等待時(shí)間（latency）較長(zhǎng)的請(qǐng)求。
3. 支持AJAX調(diào)試。可以自動(dòng)將json或xml數(shù)據(jù)格式化，方便查看。
4. 支持AMF調(diào)試?？梢詫lash Remoting 或 Flex Remoting信息格式化，方便查看。
5. 支持重發(fā)網(wǎng)絡(luò)請(qǐng)求，方便后端調(diào)試。
6. 支持修改網(wǎng)絡(luò)請(qǐng)求參數(shù)。
7. 支持網(wǎng)絡(luò)請(qǐng)求的截獲并動(dòng)態(tài)修改。
8. 檢查HTML，CSS和RSS內(nèi)容是否符合W3C標(biāo)準(zhǔn)。
Charles安裝：
????去Charles的官方網(wǎng)站（http://www.charlesproxy.com）下載最新版的相應(yīng)操作系統(tǒng)的Charles安裝包安裝即可。
????Charles是收費(fèi)軟件，可以免費(fèi)試用30天。試用期過(guò)后，未付費(fèi)的用戶仍然可以繼續(xù)使用，但是每次使用時(shí)間不能超過(guò)30分鐘，并且啟動(dòng)時(shí)將會(huì)有10秒種的延時(shí)。
????因此，該付費(fèi)方案對(duì)廣大用戶還是相當(dāng)友好的，即使你長(zhǎng)期不付費(fèi)，也能使用完整的軟件功能。只是當(dāng)你需要長(zhǎng)時(shí)間進(jìn)行封包調(diào)試時(shí)，會(huì)因?yàn)镃harles強(qiáng)制關(guān)閉而遇到影響。（偷偷告訴你，公眾號(hào)回復(fù)“Charles”獲取破解版下載鏈接）
Charles的功能很強(qiáng)大，我們這里只介紹幾個(gè)常用的并且非常實(shí)用的功能：
????1. 將Charles設(shè)置成系統(tǒng)代理
????2. 截取移動(dòng)設(shè)備上的網(wǎng)絡(luò)請(qǐng)求包
? ? ? ? 2.1手動(dòng)重復(fù)請(qǐng)求（Repeat，Advanced ?Repeat）
? ? ? ? 2.2手動(dòng)模擬請(qǐng)求（Compose）
? ? ? ? 2.3修改網(wǎng)絡(luò)請(qǐng)求內(nèi)容（Compose）
? ? 3. 過(guò)濾網(wǎng)絡(luò)請(qǐng)求
? ? 4. 代理轉(zhuǎn)發(fā)
? ? 5. 支持https請(qǐng)求抓包（如果配置了還是抓不到，下面有解決方案）
Charles 主要提供兩種查看封包的視圖，分別名為 “Structure” 和 “Sequence”。
? ? 1. Structure 視圖將網(wǎng)絡(luò)請(qǐng)求按訪問(wèn)的域名分類。
? ? 2. Sequence 視圖將網(wǎng)絡(luò)請(qǐng)求按訪問(wèn)的時(shí)間排序。
下面將一一介紹這些如何配置和使用
一.?將Charles設(shè)置成系統(tǒng)代理
Charles 是通過(guò)將自己設(shè)置成代理服務(wù)器來(lái)完成抓包的，勾選系統(tǒng)代理后，系統(tǒng)本地發(fā)出去的請(qǐng)求都能被截取下來(lái)。如果只抓取APP的包的話，可關(guān)閉此配置，這樣不會(huì)出現(xiàn)太多的數(shù)據(jù)看著比較亂。
Mac
Windows:
????需要注意的是，Chrome 和 Firefox 瀏覽器默認(rèn)并不使用系統(tǒng)的代理服務(wù)器設(shè)置，而 Charles
是通過(guò)將自己設(shè)置成代理服務(wù)器來(lái)完成封包截取的，所以在默認(rèn)情況下無(wú)法截取 Chrome 和 Firefox
瀏覽器的網(wǎng)絡(luò)通訊內(nèi)容。如果你需要截取的話，在 Chrome 中設(shè)置成使用系統(tǒng)的代理服務(wù)器設(shè)置即可，或者直接將代理服務(wù)器設(shè)置成
127.0.0.1:8888 也可達(dá)到相同效果。
二.?截取移動(dòng)設(shè)備上的網(wǎng)絡(luò)請(qǐng)求包
我們?cè)谡{(diào)試移動(dòng)APP時(shí)，需要抓取APP發(fā)送的數(shù)據(jù)包，首先進(jìn)行設(shè)置，Proxy -> Proxy Settings默認(rèn)端口是8888，根據(jù)實(shí)際情況可修改。
查看本機(jī)IP地址：Help -> Local IP Addresses
然后配置手機(jī)代理：
IOS和Android配置差不多
打開要調(diào)試的APP，請(qǐng)求就會(huì)先發(fā)送到Charles，然后驗(yàn)證是否允許訪問(wèn)。
當(dāng)點(diǎn)擊允許后，可以在Proxy -> Access Control Settings里看到可以訪問(wèn)此代理服務(wù)器列表
注意
如果不小心點(diǎn)擊了拒絕，可以手動(dòng)添加手機(jī)IP/Mac地址到允許訪問(wèn)列表，或者重啟Charles，手機(jī)再次訪問(wèn)，會(huì)再次提示選擇。
如果不想每換一個(gè)手機(jī)都要進(jìn)行驗(yàn)證，可以配置允許所有手機(jī)訪問(wèn)，加入
0.0.0.0/0（IPv4）或::/0（IPv6）
現(xiàn)在就可以抓包了，拿一款我們公司開發(fā)的樂(lè)視車聯(lián)APP來(lái)做測(cè)試：
三.?過(guò)濾網(wǎng)絡(luò)請(qǐng)求
通常情況下，網(wǎng)絡(luò)請(qǐng)求是非常大量的，從幾十個(gè)請(qǐng)求里找到我們需要的觀察的某個(gè)請(qǐng)求比較費(fèi)時(shí)，那么我們就需要對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行過(guò)濾，只監(jiān)控向指定目錄服務(wù)器上發(fā)送的請(qǐng)求。有兩種方法：
1. 在Sequence界面的中部的Filter欄中填入需要過(guò)濾出來(lái)的關(guān)鍵字。例如我們的服務(wù)器的地址是：*.leautolink.com，那么只需要在Filter欄中填入leautolink即可。（一般用于臨時(shí)過(guò)濾）
2. 在Charles的菜單欄選擇"Proxy"->"Recording Settings"，然后選擇Include欄，選擇添加一個(gè)項(xiàng)目，然后填入需要監(jiān)控的協(xié)議，主機(jī)地址，端口號(hào)。這樣就可以只截取目標(biāo)網(wǎng)站的封包了。如下圖所示：（固定過(guò)濾地址）
四.?代理轉(zhuǎn)發(fā)
?實(shí)際開發(fā)時(shí)，有這樣的場(chǎng)景，服務(wù)端線上版本有bug，你在本地修改程序后，需要模擬實(shí)際的線上環(huán)境，來(lái)驗(yàn)證程序的正確性，最笨的方法就是讓客戶端修改一下APP的調(diào)用地址到你本機(jī)，然后重新打一個(gè)版本供你模擬測(cè)試，這樣雖然可以，但每次遇到bug都要這么做的話，那效率極其低下，然而Charles為我們解決了這個(gè)問(wèn)題。
請(qǐng)求轉(zhuǎn)發(fā)，把調(diào)用方調(diào)用的地址轉(zhuǎn)發(fā)到你本機(jī)地址的程序進(jìn)行執(zhí)行。
右鍵 -> Map Remote ...
并且配置Tools -> Map Romote
運(yùn)行APP
五. Https請(qǐng)求抓包
默認(rèn)我們是看不到https的請(qǐng)求數(shù)據(jù)的。我們需要安裝證書。
Mac:
雙擊打開Charles Proxy CA
手機(jī)配置完代理（必須的操作）后，瀏覽器打開http://chls.pro/ssl
然后配置Proxy -> SSL Proxying Settings... 添加要抓取的https請(qǐng)求
然后再次請(qǐng)求：
如果不再使用Charles，想刪除手機(jī)里的證書文件怎么刪除呢？
設(shè)置->通用->描述文件與設(shè)備管理，刪除指定的證書即可
Windows:
下一步
然后繼續(xù)下一步直到導(dǎo)入成功。
剩下的配置與Max下配置相同
SSL的問(wèn)題：
????最近iPhone系統(tǒng)更新到ios
10.3后,用Charles抓包竟然出現(xiàn)了一些問(wèn)題,https的請(qǐng)求都會(huì)失敗,提示錯(cuò)誤信息為Failure SSLHandshake:
Received fatal alert: unknown_ca 和You may need to configure your browser
or application to trust the Charles Root Certificate.
然而之前任何問(wèn)題都沒(méi)有,并且相關(guān)設(shè)置都正確:電腦上安裝了Charles的根證書,并且設(shè)置了始終信任,然后手機(jī)上也登錄了http://chls.pro/ssl安裝了描述文件,一切都按正常程序走的,但是錯(cuò)誤始終無(wú)法解決.
原因：
????雖然charles的根證書已經(jīng)在安裝列表中顯示,但它是被關(guān)閉的。在iOS
10.3之前,當(dāng)你將安裝一個(gè)自定義證書,iOS會(huì)默認(rèn)信任,不需要進(jìn)一步的設(shè)置。而iOS
10.3之后,安裝新的自定義證書默認(rèn)是不受信任的。如果要信任已安裝的自定義證書,需要手動(dòng)打開開關(guān)以信任證書。
解決：
設(shè)置->通用->關(guān)于本機(jī)->證書信任設(shè)置-> 找到charles proxy custom root certificate然后信任該證書即可.
Windows系統(tǒng)無(wú)法上網(wǎng)的問(wèn)題
????在windows下，如果Charles沒(méi)有正常關(guān)閉，或者系統(tǒng)重啟后無(wú)法上網(wǎng)的問(wèn)題，因?yàn)镃harles做了系統(tǒng)代理，當(dāng)上網(wǎng)的時(shí)候，首先先訪問(wèn)代理服務(wù)器，然后代理再去鏈接網(wǎng)絡(luò)，這時(shí)候Charles是非正常關(guān)閉的，只要重新打開Charles即可上網(wǎng)正常，正常關(guān)閉Charles后同樣沒(méi)問(wèn)題。
寫給測(cè)試人員的
????另外抓包工具不只是開發(fā)人員獨(dú)享的，任何一個(gè)參與項(xiàng)目的人都可以使用，測(cè)試工程師，運(yùn)維，產(chǎn)品經(jīng)理等等任何對(duì)技術(shù)感興趣的人，尤其是測(cè)試工程師，在測(cè)試的過(guò)程中遇到問(wèn)題，不是簡(jiǎn)單的bug記錄員，而要做到問(wèn)題的分析員，這才是真正的“工程師”，當(dāng)bug真正的到開發(fā)這的時(shí)候，他拿到的是不僅僅是bug，包含了分析過(guò)程，分析的數(shù)據(jù)，甚至是解決方案。我覺(jué)得這才是標(biāo)準(zhǔn)工作方式。
????舉個(gè)例子，現(xiàn)在是移動(dòng)互聯(lián)網(wǎng)時(shí)代，那么我們開發(fā)的客戶端必然包括Android和IOS版本，同樣的功能必然在不同的客戶端都有實(shí)現(xiàn)，比如同樣的功能Android能用，而IOS不能用，這時(shí)候?qū)τ跍y(cè)試人員來(lái)說(shuō)，他可以簡(jiǎn)單的提個(gè)bug說(shuō)某個(gè)功能Android能用，ISO不能用，請(qǐng)開發(fā)人員解決。這個(gè)問(wèn)題應(yīng)該給誰(shuí)呢？IOS開發(fā)，是IOS缺少請(qǐng)求參數(shù)？服務(wù)端開發(fā)，是服務(wù)端缺少對(duì)IOS的兼容嗎？為了能讓問(wèn)題解決，可能要寫兩個(gè)相同的bug發(fā)給不同的人，
那我們開發(fā)看到這樣的問(wèn)題，首先重現(xiàn)問(wèn)題，那么肯定要跟測(cè)試人再次溝通，問(wèn)問(wèn)當(dāng)時(shí)的測(cè)試過(guò)程，然后模擬同樣的數(shù)據(jù)進(jìn)行復(fù)現(xiàn)。
????那么如果我們的測(cè)試工程師換一種工作方式呢？當(dāng)遇到問(wèn)題的時(shí)候，用抓包工具把數(shù)據(jù)抓下來(lái)，首先比較Android和IOS發(fā)送請(qǐng)求參數(shù)有什么不同，比較一下返回的數(shù)據(jù)有什么不同，如果請(qǐng)求參數(shù)不同，那么測(cè)試人員通過(guò)模擬工具，把缺少的參數(shù)加上，那么返回的數(shù)據(jù)是不是就正確了呢？如果參數(shù)相同，返回的數(shù)據(jù)不同，或者是參數(shù)相同，返回的數(shù)據(jù)相同，這樣的話，問(wèn)題就顯而易見(jiàn)了，測(cè)試人員可以把抓取的數(shù)據(jù)提交給相應(yīng)的開發(fā)人員，而開發(fā)人員完全可以去debug了。提高測(cè)試人員的自身技能，而又提高了解決問(wèn)題的效率，何樂(lè)而不為？
