Charles 的幾個調試技巧

Charles 是一個網絡調試的代理工具，相似 Windows 下的 Fildder，這裏介紹下幾個經常使用的調試技巧，使用的版本是 Charles 4。

一、移動端抓包

在移動開發中，常常會遇到在手機上調試的場景，這時候就能夠經過 Charles 進行抓包，設置也很簡單：

在菜單欄上選擇 Proxy 》Proxy Settings，勾選 Enable transparent HTTP proxying，代理端口填寫 8888，也能夠自定，這樣設置就完成了；

接下來是手機端的設置，以 iPhone 爲例：

在 iPhone 的 設置 》無線局域網，選擇當前 WIFI 連接的詳情，將底部有HTTP代理切換成手動，而後填上 Charles 所運行電腦的 IP，及端口號：

這時用手機訪問網絡，Charles 會彈出確認對話框，確認便可。

二、模擬移動網絡環境

在菜單欄上選擇，選擇 Proxy 》Throttle Setting，勾選上 Enable Throttling，而後就能夠選擇須要模擬的網絡環境了：

三、修改 Request 網絡請求

在調試時咱們常常須要改變請求參數，這個功能就很方便，設置方法：

在請求列表中選擇須要修改的請求，在反鍵菜單中選擇 Compose，接下來就能夠在下面修改 key，value 了，最後點擊 Execute 發送請求。

除此以外設置斷點也能夠修改 Request，這個在下面的第四點中一塊兒介紹。

四、修改 Response 網絡請求

與上條相似，調試時咱們也須要對服務端的各類返回作處理，因此能夠直接用 Charles 修改 Response 返回，設置有兩個方法實現，一個是臨時設置斷點：

在請求列表中選擇須要修改的請求，反鍵選擇 Breakpoints，而後再次訪問這個接口，這時 Charles 會捕獲到該接口並讓你修改 Request，修改完成後點擊 Execute 會再次讓你修改 Response，這時就能夠修改，key，value 了，一樣點擊 Execute 發送請求。

例子中簡單的發送了一個 Ajax 請求，默認返回值爲 ret:0，經過添加 Rewrite 規則後，咱們能夠看到瀏覽器中返回值爲 ret:1 了：

另外一個方法是設置 Rewrite，若是咱們要常常性的修改 Response，那斷點模式就比較繁瑣，設置 Rewrite 便可一勞永逸：

在請求列表中選擇須要修改的請求，在菜單欄上選擇 Tools 》Rewrite，依次添加規則，修改的地址，修改值：

五、網絡映射功能

映射分爲 Map Local 和 Map Remote，第一個是將網絡請求映射到本地，而第二個是映射到另外一個服務地址，先以 Map Local 爲例：

咱們在 Charles 中找到一個樣式表文件，反鍵菜單中選擇 Map Local，而後在 Map To 地址中填入本地的一個樣式表：

刷新網頁便可看到本來灰色的背景被改爲了橙色，這個方法很是適用調試線上的 Javascript、CSS 文件。

而後在來看看 Map Remote 設置，反鍵菜單中選擇 Map Remote，這裏咱們把 www.qq.com 映射到本地的一個 Node 服務：

打開 www.qq.com 看到就是 127.0.0.1:3004 服務，這個方法能夠用於調試線上的 Ajax 請求接口。