Charles介紹
Charles可能很多人不熟悉，但是另外一個windows下的Fiddler很多人應該不陌生的；它們都是同性質(zhì)的代理抓包工具；
正常情況下，Chrome DevTool已經(jīng)滿足了日常web開發(fā)的需求，但是有的特性：編輯request的參數(shù)、重定向request請求的資源、編輯response的數(shù)據(jù)，ChromeDevTool就很蛋疼了，而且查看和調(diào)試移動端資源時候Chrome也并不好用；
我常借用Charles做這些事情 ：
- 抓取 Http 和 Https 的請求和響應，抓包是最常用的了。
- 重發(fā)網(wǎng)絡請求，方便后端調(diào)試，復雜和特殊情況下的一件重發(fā)還是非常爽的（捕獲的記錄，直接repeat就可以了，如果想修改還可以修改）。
- 修改網(wǎng)絡請求參數(shù)（客戶端向服務器發(fā)送的時候，可以修改后再轉(zhuǎn)發(fā)出去）。
網(wǎng)絡請求的截獲和動態(tài)修改。 - 支持模擬慢速網(wǎng)絡，主要是模仿手機上的2G/3G/4G的訪問流程。
- 支持本地映射和遠程映射，比如你可以把線上資源映射到本地某個文件夾下，這樣可以方便的處理一些特殊情況下的bug和線上調(diào)試（網(wǎng)絡的css，js等資源用的是本地代碼，這些你可以本地隨便修改，數(shù)據(jù)之類的都是線上的環(huán)境，方面在線調(diào)試）；
- 可以抓手機端訪問的資源（如果是配置HOST的環(huán)境，手機可以借用host配置進入測試環(huán)境）
安裝
- 下載
- 安裝后長這樣
image.png
配置
- 手機和電腦連上同一個局域網(wǎng)
- 打開Charles客戶端，點擊Proxy->Proxy Settings菜單，設置默認端口8888
image.png
- 打開Charles客戶端，點擊Help->Local Ip Address，查看本機IP
image.png
- 打開手機局域網(wǎng)設置，點擊代理，設置為你本機IP和上面默認的8888端口
這里的服務器地址應該是192.168.20.111,圖片上的寫錯了
- 打開Charles客戶端，點擊Poxy->macOs Proxy
- 等待一會，Charles會彈出是否允許，點擊allow
image.png
- Charles就會抓到你手機上的請求地址
image.png
https請求是unknow問題
抓到包后會發(fā)現(xiàn)有些請求是unknow，看不到具體的請求，原因是你的手機沒有安裝ssl證書、并且電腦需要配置代理網(wǎng)址
image.png
- 解決方法：
1、打開Charles, 點擊Help->SSL Proxying->Install Charles Root Certificate，安裝后去鑰匙串中允許Charles的證書始終信任
image.png
2、 手機瀏覽器輸入chls.pro/ssl安裝證書（通用->描述文文件與設備管理->選中Charles證書安裝），安裝好之后要設置信任該證書（通用->關(guān)于本機->設置信任該證書）,不然抓包仍然會顯示unknown類型。
3、在Charles中，設置Proxy->SSL Proxying Settings中的SSL Proxying的代理 網(wǎng)址。直接點擊Add->OK即可，不用輸入host和port，就可以默認代理所有請求
image.png
