Web除錯工具Charles使用心得

目錄

• 一、安裝與使用
• 二、抓手機的請求包
  • http請求抓包
  • https請求抓包
    • iPhone手機抓https包
    • 安卓（小米）手機抓https包
• 三、用本地檔案替換線上檔案
  • 替換測試環境的檔案
  • 替換生產環境的檔案（跨域）
• 四、其他
  • 篩選指定域下的請求
• 參考文件

@蔣歡，美團點評前端工程師，2年工作經驗，主要負責大眾點評“點餐H5"和"美團點評智慧餐廳"小程式的開發。本文首發於 蔣歡的知乎專欄 ，敬請關注。

正文從這開始～

Charles 是一個網路代理工具，經常用來進行 Mac 下的 Web 除錯工作，功能類似於 Windows 環境下的 Fiddler 工具。因為工作中經常會用到，所以決定寫一篇總結文章。

注意，這一篇文章主要用來記錄在使用過程中遇到的疑難問題和解決方法。常規的 Charles 安裝與使用方法請查閱文末的 參考文件 ，本文不再詳述。

一、安裝與使用

從Charles 官網下載 並安裝軟體包。

基本的使用方法本文就不作介紹了，如果不清楚的話，請移步這篇 網路教程 ，寫的十分詳細。

下面具體分析在使用中遇到的問題。

二、抓手機的請求包

http請求抓包

---

首先，需要獲取本機的 IP 地址。

開啟 Charles 後，在 Help 選項下選擇 Local IP Address 可以看到本機的 IP 地址。如果獲取的是 IPv6 地址。也可以按住 Mac 上的 option 鍵點選 WIFI 圖示獲得 IPv4 格式地址。如下圖所示：

在 iPhone 上的 WIFI 手動設定 HTTP 代理，伺服器地址為電腦的 IP 地址，埠號為8888。 然後在 Charles 的工具欄上開啟 Recording 按鈕，用手機瀏覽器訪問頁面或開啟 App，在 Charles 中即可看到 http 請求包。

https請求抓包

---

iPhone手機抓https包

iPhone 抓取 https 的包，網上配置很多，這裡就不詳細介紹了，附 網路教程 供大家參考。

補充兩點技巧：

• 技巧1：按以上操作設定後，如果 iPhone 抓取 https 請求包時顯示 unknown。
  則說明Charles的證書在只在本機安裝了，但還未被設為信任，需要按照此步驟進行設定：通用 —> 關於本機 —> 證書信任設定 —> CA勾選。

• 技巧2：針對 Proxy —> SSL Proxying Settings 的配置地址，如果不想每個域名都設定一次，可以直接把 Host 和 Port 都設為 *，允許抓取所有域名的請求包。

安卓（小米）手機抓https包

安卓手機的抓包與 iPhone 相似，都需要按照以下4步來抓 https 請求包：

1. 電腦裝證書
2. 移動裝置安裝證書
3. Charlse 新增 SSL Proxying
4. 手機使用 Mac 代理訪問目標域名

補充兩種安裝失敗情況及解決辦法

• 情況1：若遇到在模擬器/手機的瀏覽器中輸入 charlesproxy.com/getssl 不是彈一個框，而是出現了下圖的情況，可能是因為手機沒有將電腦的 IP 地址設為代理（埠號為8888）

• 情況2：小米手機安裝證書提示**“沒有可安裝的證書”**，解決方式：

a、開啟 Charles 的 HELP -> SSL Proxying -> Export Charles Root Certification and Private Key，輸入任意密碼，匯出 pem 檔案。

b、匯出後，用微信或者其他方式將 pem 檔案傳到安卓手機裡。在 WLAN設定 —> 安裝證書裡開啟該檔案，輸入匯出時設定的密碼就行了。

例如通過微信方式傳遞的檔案路徑為：WLAN -> 高階設定 -> 安裝證書 -> Tencent資料夾 -> MicroMsg資料夾 -> Download資料夾

Charles原理解析

Charles 抓包安裝的證書，電腦和手機是配對的。不管是通過訪問 charlesproxy.com/getssl（因為 Mac 已經開啟代理，所以訪問這個地址實際上返回的是本機的 Charles 證書，而並沒有訪問 charlesproxy.com 這個網站），還是通過手動安裝，實際上安裝的都是對應本機的 SSL 證書。所以如果安裝證書的手機和電腦不是配對關係的話，即使兩者都有證書也是不能抓包的。

三、用本地檔案替換線上檔案

替換測試環境的檔案

---

a、首先需要 Chrome 安裝 Proxy SwitchyOmega 外掛並配置 Charles 代理，這樣 Chrome 下的連結才會走 Charles 傳送。

b、開啟Charles，選擇 Tools —> No caching Seting，勾選 Enable No Caching，確保不會因為檔案快取影響程式碼生效。

另外，Chrome 控制皮膚裡的 Network 設定，最好也勾選 Disable Cache 選項。這樣可以在瀏覽器除錯階段也不啟用快取，防止修改了程式碼，但因為瀏覽器快取而未生效。

c、單個檔案的替換。選擇 Tools —> Map Local Settings 將線上檔案對映到本地檔案, 點選選擇要替換的檔案(例如：mm-order-list.*.js)。Protocol 如果置空，則預設匹配所有協議。
注意：webpack打包的專案可能還需要根據實際情況對映公共檔案，如 manifest.*.js 和 common.*.js 才可以完成替換。

d、資料夾整體替換。按照步驟c，我們已經可以進行單檔案替換了，但單獨設定太麻煩。所以我們直接進行資料夾整體替換。以配置 app-menuorder-h5 的專案為例，Host 和 Local Path 配置如下圖所示:

配置完本地檔案對映 Map Local Settings 後，還需要配置 Rewrite 選項，實現對檔案的重寫替換。通過正規表示式來替換對應目錄下所有檔案。

e、最後，重新整理瀏覽器，如果 http 請求的 Respone Header 裡有 X-Charles-Map-Local 欄位則代表本地檔案替換成功。

替換生產環境的檔案（跨域）

---

用本地檔案替換生產環境的檔案同樣需要設定 Map Local Settings 和 Rewrite Settings 兩項。

a、設定 Map Local Settings 進行檔案目錄對映，只需要把 Host 改成靜態檔案儲存的域名即可，本例 Host: www.dpfile.com

b、設定 Rewrite Settings，這裡需要分成兩步：

第一步，指定替換檔案，注意線上的檔案因為被壓縮過，所以檔名中可能會有 “min” 欄位。

第二步，由於 m.dianping.com 引用對映後的 www.dpfile.com 域下的檔案，從而導致跨域問題。

請注意這裡需要分情況討論：

• 情況1：Response Header 不包含 Access-Control-Allow-Origin 與 Access-Control-Allow-Credentials 欄位，則需手動新增這兩個欄位。

所以需要對 dpfile.com 域下的 Response Header 新增欄位 Access-Control-Allow-Credentials: true 與 Access-Control-Allow-Origin: *，從而允許 dpfile.com 域下的檔案被其他域所引用。

• 情況2：Response Header 如已包含 Access-Control-Allow-Origin 欄位，則只需新增 Access-Control-Allow-Credentials。不能再新增 Access-Control-Allow-Origin，否則會報錯。

按以上配置設定完畢後，即可用本地檔案替換生產環境線上檔案：）

四、其他

篩選指定域下的請求

---

由於 Charles 會抓取手機發出的全部請求包，為了能快速定位我們需要的請求，可以對 Charles 的抓包請求進行篩選，具體方法是：Setting —> Recording Setting —> Include，設定只展示特定域的請求包。

參考文件

• 詳解Charles
• iPhone安裝charles
• Charles抓取https時一直顯示unknown
• Charles https抓包 — Android —— 美團謝敏