0. 前言
不管是移動開發者還是測試者，於抓包工具對於我們的工作都是非常有幫助的，而Charles是一款非常優秀的抓包工具
Charles不僅可以幫助我們抓取服務器返回的數據，還可以修改請求參數，修改響應體
基本上HTTP能修改的東西，Charles都能幫我們修改
所以當我們接口在Mock階段時我們可以通過Charles設置我們本地的JSON數據，加速我們的開發
而且還能模擬弱網環境，幫助我們調試網絡極端情況的用戶體驗，下面我們就一起來體驗下Charles的功能吧
本機安裝的 Charles 版本是 Windows 平台下的 Charles 4.0.2
本文主要內容：
Charles 抓包 HTTP
Charles 抓包 HTTPS
Android7.0及以上系統中HTTPS抓包
使用Charles模擬慢網速
Breakpoints斷點功能
Compose功能修改Request
Rewrite重寫功能
Map映射功能
Repeat 重試功能
實戰手機天貓抓包(Charles + Drony)
1. Charles 抓包 HTTP
首先到 Charles 官網去下載軟件，安裝非常簡單，一直下一步就可以了
1.1 初始設置
Charles 設置
開啟 start recording 按鈕，如下圖所示：
查看 Charles 代理監聽的端口號，Proxy -> Proxy Settings , 我機器上的是 8888 端口, 如下圖所示：
1.2 手機設置
以Android手機為例，進入我們已經連接的WIFI，設置該WIFI：
設置好之后，Charles 會彈出一個框，提示是否允許手機進行連接，接受即可，如下圖所示：
如果你不小心點擊了 拒絕（Deny），也可以在這里： Proxy -> Access Control Settings 進行添加你的手機IP
通過以上的設置，Charles就可以抓HTTP請求了
2. Charles 抓包 HTTPS
經過上面的設置之后，我們就可以對手機的網絡請求進行抓包了，但是如果請求的是 HTTPS，抓到的包無法查看，需要電腦和手機安裝證書 (Help -> SSL Proxying)
電腦上安裝證書很簡單，直接下一步就可以了，不用任何設置。這里講下手機上安裝證書，因為手機上安裝證書可能會遇到問題：
點擊上圖的 Install Charles Root Certificate on a Mobile Device or Remote Browser , 會給我們安裝提示：
上面的提示框意思是說，在手機設置好代理后，在手機瀏覽器中訪問 chls.pro/ssl 下載證書
這里需要注意的是，有的手機可能會提示：無法安裝該證書，因為無法讀取證書文件
解決方法：不要使用系統的瀏覽器下載，使用第三方瀏覽器下載 UC 或者 Edge 瀏覽器
下載完成后，證書文件名可能是：charles-proxy-ssl-proxying-certificate.pem
證書下載完成后，在手機上安裝該證書，流程如下(小米手機為例)：
打開手機 設置 -> 更多設置 -> 系統安全 -> 從SD卡安裝 , 然后輸入你自定義的證書名稱即可：
電腦和手機上證書都安裝完畢后，在Charles上開啟 SSL Proxy (Proxy -> SSL Proxying Settings )
經過以上步驟后，你就可以對 HTTPS 請求抓包了
3. Android7.0及以上系統中HTTPS抓包
在Android7.0及以上系統中，HTTPS抓包可能會失敗。因為處於安全的考慮，Android7.0及以上，系統默認只會信任系統(System)級別的證書
不再信任用戶添加的證書(User)，也就是說上面我們在設備上安裝的 Charles 根證書，系統不再信任。
為了安全起見，一般我們只在 Debug 版本允許抓包，正式版本不應該允許抓包。可以 AndroidManifest.xml 文件中配置安全策略：
1.<application android:networkSecurityConfig="@xml/network_security_config" >
2.</application>
network_security_config.xml
1.<?xml version="1.0" encoding="utf-8"?>
2.<network-security-config>
3.<debug-overrides>
4.<trust-anchors>
5.<!-- Trust user added CAs while debuggable only -->
6.<certificates src="system" />
7.<certificates src="user" />
8.</trust-anchors>
9.</debug-overrides>
10.<base-config cleartextTrafficPermitted="true">
11.<trust-anchors>
12.<certificates src="system" />
13.</trust-anchors>
14.</base-config>
15.<domain-config cleartextTrafficPermitted="true">
16.<domain includeSubdomains="true">182.254.116.117</domain>
17.<domain includeSubdomains="true">pingma.qq.com</domain>
18.</domain-config>
19.</network-security-config>
然后在res目錄下新建xml文件夾，然后在xml文件夾中新建 network_security_config.xml
1.<?xml version="1.0" encoding="utf-8"?>
2.<network-security-config>
3.<debug-overrides>
4.<trust-anchors>
5.<certificates src="system" />
6.<!-- debug版本情況下，信任用戶添加的證書 -->
7.<certificates src="user" />
8.</trust-anchors>
9.</debug-overrides>
10.<base-config cleartextTrafficPermitted="true">
11.<trust-anchors>
12.<certificates src="system" />
13.</trust-anchors>
14.</base-config>
15.</network-security-config>
更多的安全策略配置，可以參考官方文檔：
https://developer.android.com/training/articles/security-config.html
4. 使用Charles模擬慢網速
可以在 Proxy -> Throttle Settings 設置網絡速度，還可以自定義帶寬(Bandwidth)：
5. Breakpoints斷點功能
可以使用Charles在某個網絡請求的時候進行斷點， 這樣可以精確的定位某個網絡請求：
除了上面的手動添加需要斷點的URL，如果這個URL已經請求過，可以對該請求單擊右鍵，然后點擊 Breakpoints
通過斷點功能，可以修改 Request 參數 和 Response 返回值。需要注意的是修改完 Request 參數需要點擊 Excute 按鈕，請求成功后，才能修改 Response 返回值
6. Compose功能修改Request
還可以通過 Charles 修改請求的 URL、Method、Header、Parameter等.
修改方式：對請求單擊右鍵，然后點擊 compose 按鈕
7. Rewrite重寫功能
Rewrite重寫功能是全局設置的，並不是對某個請求單擊右鍵的方式臨時操作下， Rewrite可以：
修改請求頭(Add/Modify/Remove Header)
修改Host/Path/URL
修改請求參數(Add/Modify/Remove Query-Parameter)
修改響應狀態(Response Status)
修改Body
Rewrite設置路徑： Tools -> Rewrite
Rewrite重寫顧名思義就是替換，所以是基於某個固定的值替換成某個值，添加規則的時候，支持正則表達式：
8. Map映射功能
Map映射包含兩種一種是 Map Remote，另一種是 Map Local
設置路徑：Tools -> Map Local/Remote
Map Remote 顧名思義就是把匹配的請求映射到另一個遠程URL：
Map Local 是將匹配的請求映射到本地文件：
9. Repeat 重試功能
Repeat 功能有兩種：一種是簡單的重試一次(Repeat)；還有一種 Repeat advances 可以設置重試的次數和並發的數量
重試一次主要用於是和服務端聯調，如果接口有問題，服務端開發人員可能需要在后台代碼打斷點的方式來排查問題
這個時候，我們不需要在app中重新重復上次的請求(可能需要填寫字段比較多或者界面鏈路比較長)，只需要在Charles中對該請求單擊右鍵，然后 Repeat 即可
Repeat advances 可以來對服務器進行壓力測試，或者批量提交寫數據等，如：
10. 實戰手機天貓抓包
通過上面的介紹我們可以抓包 HTTPS 請求的，但是打開手機天貓進入首頁發現 Charles 上並沒有圖片的請求URL，說明 Charles 並沒有抓到手機天貓的下載網絡圖片的請求
這個時候需要設置手機代理，下載 Drony App，然后滑到 設置 頁面
點擊選擇網絡，然后選擇你已經連上的 WIFI，然后里面有 3 個地方需要設置：
設置完 Drony App 后，還需要設置 手機系統里 WIFI 選項，以前我們是設置了 Charles 局域網的 IP 和 Charles 監聽的端口 現在要把IP改成 Drony所在的局域網 IP，因為 Drony 就安裝在手機里面，所以可以把 IP 改成 127.0.0.1，端口改成 Drony 監聽的端口 8020
最后我們成功抓取了手機天貓的圖片了，如果圖片無法展示，可以把 _.heic 去掉，只保留 .jpg 后綴，然后復制到瀏覽器中展示
