Web調試工具Charles使用心得

目錄

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

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

正文從這開始～

Charles 是一個網絡代理工具，常常用來進行 Mac 下的 Web 調試工做，功能相似於 Windows 環境下的 Fiddler 工具。由於工做中常常會用到，因此決定寫一篇總結文章。

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

1、安裝與使用

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

基本的使用方法本文就不做介紹了，若是不清楚的話，請移步這篇 網絡教程 ，寫的十分詳細。

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

2、抓手機的請求包

http請求抓包

---

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

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

獲取本機IP地址

在 iPhone 上的 WIFI 手動設置 HTTP 代理，服務器地址爲電腦的 IP 地址，端口號爲8888。 而後在 Charles 的工具欄上打開 Recording 按鈕，用手機瀏覽器訪問頁面或打開 App，在 Charles 中便可看到 http 請求包。

https請求抓包

---

iPhone手機抓https包

iPhone 抓取 https 的包，網上配置不少，這裏就不詳細介紹了，附 網絡教程 供你們參考。

補充兩點技巧：

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

https請求Unknown

• 技巧2：針對 Proxy —> SSL Proxying Settings 的配置地址，若是不想每一個域名都設置一次，能夠直接把 Host 和 Port 都設爲 *，容許抓取全部域名的請求包。

容許抓取全部SSL代理的數據包

安卓（小米）手機抓https包

安卓手機的抓包與 iPhone 類似，都須要按照如下4步來抓 https 請求包：

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

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

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

未將手機設置代理即訪問getssl連接

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

a、打開 Charles 的 HELP -> SSL Proxying -> Export Charles Root Certification and Private Key，輸入任意密碼，導出 pem 文件。

Charles 導出 Pem 文件提取證書

b、導出後，用微信或者其餘方式將 pem 文件傳到安卓手機裏。在 WLAN設置 —> 安裝證書裏打開該文件，輸入導出時設置的密碼就好了。

例如經過微信方式傳遞的文件路徑爲：WLAN -> 高級設置 -> 安裝證書 -> Tencent文件夾 -> MicroMsg文件夾 -> Download文件夾

小米手機安裝證書

Charles原理解析

Charles 抓包安裝的證書，電腦和手機是配對的。不論是經過訪問 charlesproxy.com/getssl（由於 Mac 已經開啓代理，因此訪問這個地址實際上返回的是本機的 Charles 證書，而並無訪問 charlesproxy.com 這個網站），仍是經過手動安裝，實際上安裝的都是對應本機的 SSL 證書。因此若是安裝證書的手機和電腦不是配對關係的話，即便二者都有證書也是不能抓包的。

3、用本地文件替換線上文件

替換測試環境的文件

---

a、首先須要 Chrome 安裝 Proxy SwitchyOmega 插件並配置 Charles 代理，這樣 Chrome 下的連接纔會走 Charles 發送。

SwitchyOmega 插件配置

記得要切換到 Charlse 代理

b、打開Charles，選擇 Tools —> No caching Seting，勾選 Enable No Caching，確保不會由於文件緩存影響代碼生效。

Charles不啓用緩存設置

另外，Chrome 控制面板裏的 Network 設置，最好也勾選 Disable Cache 選項。這樣能夠在瀏覽器調試階段也不啓用緩存，防止修改了代碼，但由於瀏覽器緩存而未生效。

Chrome不啓用緩存設置

c、單個文件的替換。選擇 Tools —> Map Local Settings 將線上文件映射到本地文件, 點擊選擇要替換的文件(例如：mm-order-list.*.js)。Protocol 若是置空，則默認匹配全部協議。
注意：webpack打包的項目可能還須要根據實際狀況映射公共文件，如 manifest.*.js 和 common.*.js 才能夠完成替換。

Charles替換單個文件配置

d、文件夾總體替換。按照步驟c，咱們已經能夠進行單文件替換了，但單獨設置太麻煩。因此咱們直接進行文件夾總體替換。以配置 app-menuorder-h5 的項目爲例，Host 和 Local Path 配置以下圖所示:

Charles替換文件夾 Map Local Setting

配置完本地文件映射 Map Local Settings 後，還須要配置 Rewrite 選項，實現對文件的重寫替換。經過正則表達式來替換對應目錄下全部文件。

Charles替換文件夾 Rewrite Setting

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」 字段。

生產環境設置Map Local Settings 文件替換目錄

第二步，因爲 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 域下的文件被其餘域所引用。

經過給Response Header添加字段，容許dpfile域下文件被引用

• 狀況2：Response Header 如已包含 Access-Control-Allow-Origin 字段，則只需添加 Access-Control-Allow-Credentials。不能再添加 Access-Control-Allow-Origin，不然會報錯。

Response Header 已有 Access-Control-Allow-Origin 字段，重複添加報錯

按以上配置設置完畢後，便可用本地文件替換生產環境線上文件：）

4、其餘

篩選指定域下的請求

---

因爲 Charles 會抓取手機發出的所有請求包，爲了能快速定位咱們須要的請求，能夠對 Charles 的抓包請求進行篩選，具體方法是：Setting —> Recording Setting —> Include，設置只展現特定域的請求包。

Charles篩選特定域下的請求

參考文檔

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