Charles 主要的功能包括下面這些：
截取 Http 和 Https 網(wǎng)絡(luò)封包。支持重發(fā)網(wǎng)絡(luò)請求，方便后端調(diào)試垮庐。支持修改網(wǎng)絡(luò)請求參數(shù)爆袍。支持網(wǎng)絡(luò)請求的截獲并動態(tài)修改首繁。支持模擬慢速網(wǎng)絡(luò)。
charles相當(dāng)于一個插在服務(wù)器和客戶端之間的“過濾器”陨囊；
當(dāng)客戶端向服務(wù)器發(fā)起請求的時候弦疮，先到charles進(jìn)行過濾，然后charles在把最終的數(shù)據(jù)發(fā)送給服務(wù)器蜘醋；
注意：此時charles發(fā)給服務(wù)器的數(shù)據(jù)胁塞，不一定是客戶端請求的數(shù)據(jù)；charles在接到客戶端的請求時可以自由的修改數(shù)據(jù)压语，甚至可以直接Block客戶端發(fā)的請求啸罢；
服務(wù)器接收請求后的返回數(shù)據(jù)，也會先到charles胎食，經(jīng)過charles過濾后再發(fā)給客戶端扰才；
同理：客戶端接收的數(shù)據(jù)，不一定就是服務(wù)器返回的數(shù)據(jù)厕怜，而是charles給的數(shù)據(jù)训桶；
正因為上面的原理累驮，所以charles能實現(xiàn)的功能，對前端開發(fā)者來說非常有吸引力舵揭，相當(dāng)于請求和響應(yīng)都可控的谤专，而且charles為了控制更加方面，提供很多簡潔的操作午绳；
一置侍、charles的下載和安裝
要想下載一個工具，怎么辦最簡單拦焚，在開發(fā)工具里蜡坊，最方便的方式就去去它的官網(wǎng)下載，當(dāng)然前提是在我們的祖國懷抱內(nèi)~
charles就可以這樣下載赎败，首先百度一下咯
或者直接點擊下載地址：
<u>Download a Free Trial of Charles ? Charles Web Debugging Proxy</u>
image.png
image.png
根據(jù)你的系統(tǒng)版本選擇對應(yīng)的版本
charles現(xiàn)在出到了4.2.7版本秕衙，這個基本上沒什么影響，一般只要下載最新的版本就可以啦
記得好像是4.0一下不支持http2.0的抓取僵刮，所以這點注意一下就ok啦
下載好后進(jìn)入安裝頁面据忘，基本也是一路點下去，記得自己記得安裝目錄
image.png
打開安裝目錄搞糕，雙擊運行charles.exe
安裝好啦~
卸載的時候勇吊，就更簡單了，直接找到控制面板-程序與功能-卸載或更改程序窍仰，然后雙擊卸載就可以了
image.png
二汉规、charles的基本介紹
關(guān)于charles有很多很強(qiáng)大的功能，這里由于篇幅限制我只做部分功能說明
*charles提供兩種不同的視圖方式
可自行按需選擇查看
structure視圖是將網(wǎng)絡(luò)請求按訪問的域名分類驹吮，也就是理解為文件夾類型
image.png
Sequence 視圖是將網(wǎng)絡(luò)請求按訪問的時間排序针史，理解為單個文件
image.png
*查看默認(rèn)端口號“Proxy->Proxy Settings”，默認(rèn)端口號為8888碟狞，可自行修改
image.png
***SSL Proxying Setting **
對于https需要設(shè)置不然抓包時會出現(xiàn)[圖片上傳失敗...(image-ff4b1a-1597751595101)]
的圖標(biāo)
image.png
我們需要點擊proxy然后選擇SSL Proxying Setting
image.png
點擊Add
image.png
Host：*
Post：443
image.png
再加入一組
Host：*
Post：443
image.png
加完之后在看抓包結(jié)果
image.png
*過濾請求
當(dāng)請求雜亂無章時啄枕，為了確保我們拿到自己想要的數(shù)據(jù)，可以使用filer進(jìn)行過濾關(guān)鍵字
image.png
過濾前
image.png
過濾后
image.png
*狀態(tài)欄
image.png
*Proxy菜單功能
image.png
*Tools菜單功能
image.png
三篷就、Charles電腦證書安裝
image.png
image.png
image.png
image.png
image.png
image.png
image.png
四射亏、charles手機(jī)證書安裝，設(shè)置代理竭业，手機(jī)進(jìn)行抓包
這一步的目的是為了移動設(shè)備連接到Charles智润，這樣移動設(shè)備發(fā)起的所有請求才能在Charles中看到
首先確保自己手機(jī)的wifi和電腦在同一網(wǎng)絡(luò)下，千萬不要用4G未辆，那么沒辦法抓包窟绷，必須連接wifi
使用Charles工具查看PC本地IP和端口號（端口號默認(rèn)為8888，也可自行修改）咐柜，選擇“Help->Local IP Address”
我的電腦本地ip地址為：192.168.1.xx
也可以選擇“Help->SSL-Proxying->install charles Root ....Browser”查看兼蜈，這樣子可以一下子把端口號和ip看到
image.png
image.png
把IP換成自己的IP
拿出我們需要設(shè)置代理的Android手機(jī)攘残，找到wifi，長按或者點擊查看wifi詳情（各類型Android手機(jī)方法大同小異为狸，多進(jìn)行嘗試）
然后進(jìn)入到wifi詳情頁面
image.png
把代理一欄從無改為手動歼郭，并在里面輸入剛才看到的IP和端口號，例如：192.168.1.x（x為你自己的號碼辐棒，每個人都不一樣）
image.png
輸入自己的主機(jī)名和端口
點擊保存或者連接病曾，如果沒有則直接返回退出
然后再次進(jìn)入詳情，看看代理一欄是不是已經(jīng)變成了剛才自己輸入的ip和端口號漾根，如果顯示則代表代理設(shè)置成功泰涂。
如果繼續(xù)顯示代理為無，則代表剛才你沒有保存辐怕，再試一遍
記得如果你不需要用手機(jī)設(shè)置代理了逼蒙，把代理記得關(guān)掉，不然會影響你瀏覽某些網(wǎng)頁和應(yīng)用
這時寄疏，手機(jī)設(shè)置好了是牢，打開你需要進(jìn)行調(diào)試的app，你會發(fā)現(xiàn)電腦上charles出現(xiàn)一條提示：
第一個箭頭標(biāo)注的是你的手機(jī)ip地址赁还。你需要允許該手機(jī)的連接妖泄，點擊“Allow”
這個提示驹沿，只會在手機(jī)首次鏈接電腦的時候出現(xiàn)艘策，同意后后面則不會出現(xiàn)。
注意渊季，如果你的手機(jī)鏈接時沒有出現(xiàn)該彈窗朋蔫，去檢查自己剛才手機(jī)端的代理是否設(shè)置錯誤
如果設(shè)置沒有問題，可選擇“Proxy->Access Control Settings”手動進(jìn)入Charles的設(shè)置選項却汉，添加當(dāng)前手機(jī)的IP
手機(jī)IP查看方式：
進(jìn)入wifi詳情
好了驯妄，到此為止，你基本已經(jīng)完成了大半的設(shè)置合砂，基本可以正常進(jìn)行抓包了
但是青扔，部分手機(jī)還需要安裝下載一個手機(jī)證書才能正常使用，安裝方法如下：
同樣點擊Help->SSL-Proxying->install charles Root ....Browser翩伪，查看手機(jī)證書下載
image.png
<u>chls.pro/ssl</u>
這一段是告訴你微猖，需要你去瀏覽器下載一個證書
此時你打開手機(jī)默認(rèn)瀏覽器，然后在網(wǎng)址欄里輸入
<u>chls.pro/ssl</u>
記得缘屹，此時你一定要是代理開啟狀態(tài)
你會得到一個文件下載提示凛剥，下載后，在瀏覽器下載內(nèi)容里找到剛才那個crt文件轻姿，打開后進(jìn)入命名頁面
可自定義名稱犁珠，或者不改逻炊。點擊保存。部分手機(jī)此時會讓你輸入手機(jī)鎖屏密碼犁享，或者讓你設(shè)置鎖屏余素，照做就可以了。
image.png
image.png
image.png
image.png
image.png
出現(xiàn)如下提示代表安裝成功炊昆。
我演示使用的手機(jī)是oppo溺森，部分Android手機(jī)證書會存在安裝問題，比如小米好像需要手動安裝窑眯，大家可自行百度證書安裝方法屏积，
我后續(xù)會進(jìn)行更新特殊情況的說明
五、查看charles請求
到此磅甩，你的設(shè)備和Charles就建立了連接炊林，可以嘗試在設(shè)備上訪問一個地址或者app，在Charles左側(cè)視圖就能實時看到請求啦~
Charles是通過將自己設(shè)置成代理服務(wù)器來完成抓包的卷要，勾選系統(tǒng)代理后渣聚，本地系統(tǒng)（如果通過瀏覽器發(fā)送請求）發(fā)送出去的請求都能被截取下來。因此僧叉，如果想只抓取手機(jī)APP發(fā)送的請求的話奕枝，可以不勾選Windows Proxy選項，這樣在測試時就不會被本機(jī)Http請求所干擾瓶堕。
也就是隘道，去掉這個勾選的狀態(tài)
image.png
