使用Charles Proxy提升iOS開發效率，charlesios

使用Charles Proxy提升iOS開發效率，charlesios

以前做前端開發的時候，使用最多的工具就是 Fiddler ，用來定位問題、類比特定情境非常方便，極大提升了開發效率。
而轉做 iOS 開發以後，一大頭疼的問題是 Fiddler 沒有 Mac 版，幸虧找到了 Charles Proxy 這個還不錯的替代工具，不過使用上與 Fiddler 還是有不少區別
另外據我不完全的觀察，不少 iOS 開發工程師並不習慣於使用 HTTP 抓包工具……因此我覺得還是有必要寫一篇文章介紹下 Charles

試用 & 正版 & 破解

Charles 是收費軟體，可以免費試用 30 天。試用版本每次使用時間不能超過 30 分鐘，使用過程中不定時會中斷 5 秒鐘，並且啟動時將會有 10 秒種的延時。因此，該試用方案對廣大使用者還是相當友好的，只是當你需要長時間進行封包調試時，會因為 Charles 強制關閉而遇到影響。

如果手頭經濟寬裕，建議上官網購買正版。

除此之外，網上也有破解版，在 http://charles.iiilab.com/ 這個網站可以下載到Charels各個版本的破解版。

使用與配置

鑒於 Charles 的使用教程非常多，本文不打算寫成入門教程，而是針對常見的開發情境，介紹如何使用 Charles 提高開發效率
基礎的使用，可以參考 iOS開發工具——網路封包分析工具Charles
Charles 本質上是一個 HTTP Proxy 伺服器，因此需要在 iOS 裝置上配置代理，不過這也意味著 Charles 只能抓取手機串連 WIFI 時的 HTTP 包，而 3G/4G 則不行
另外強烈建議使用之前先簡單瞭解一下 HTTP 協議，Charles 畢竟只是個工具而已

使用情境 快速定位 BUG 原因

App 開發中最常見的問題是，某個介面需要通過後端 HTTP 介面擷取資料並展示，而測試妹子給你提了個 BUG，告訴你這個介面沒資料或者資料有誤
初級工程師常犯的錯誤是：一開始就打斷點 Debug 或者一口咬定是後端問題，這常常會造成時間的浪費
正確的做法是先縮小 BUG 原因範圍，再準確定位，通常我會按照這樣的順序來診斷：
1. Charles 抓到相應的 HTTP 包了嗎？沒抓到請 debug App 代碼
2. 抓到的包 HTTP 響應正確嗎？
    * 如果無響應，或者 HTTP status 是4xx/5xx/，責任果斷推給後端
    * 響應是否符合介面文檔定義？完全不符合或者多了/少了JSON 欄位，責任果斷推給後端
    * 響應符合定義，但是是報錯資訊，那麼可能是 HTTP 要求不正確，對照請求與文檔定義，如果無誤，說明文檔有錯漏……責任依然推給後端
3. 以上都正確，那麼問題應該在 App 端，請開始 debug 代碼

記得拿著 Charles 的抓包結果去找後端，這比 Xcode 控制台打出來的資訊更容易說服他們

禁用響應緩衝

關於查看響應的部分，有一點需要注意的是，現在不少後端服務都會開啟 Etag （不瞭解的請看維基百科）
而如果你使用了 AFNetworking ，那麼可能在 Charles 中看不到響應內容（304響應沒有 body）
解決方案是點擊菜單Tools → No caching，在介面中開啟全域或針對特定網域名稱的緩衝禁用模式

快速構造請求中、請求失敗

通常 App 在發起請求時會有過渡效果（比如轉菊花⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄），在請求失敗時會有錯誤提示
不過在開發過程中由於同在一個區域網路請求過程通常非常短，一般也不會失敗，那怎麼去調試這兩種介面呢？
一種方式是使用 OHHTTPStubs 這個庫通過 Mock 來構造響應，缺點是要寫代碼，另一種就是使用 Charles 了
先啟動 App 發起一次請求，然後在 Charles 中找到相應的請求，點擊右鍵勾選『Breakpoints』

這樣，下次 App 再發起同樣 URL 的請求時，Charles 會給你一個斷點介面，你可以選擇 Excute 或者 Abort

如果要調試請求失敗的介面，那就點 Abort，App 會進入 HTTP 要求失敗的處理流程
如果要調試請求中的介面，那就停在這個斷點介面即可，調試完了再點 Abort 或者 Excute

實際操作過程中會發現 Excute 需要點擊兩次才能完成一次 HTTP 要求，這是為什麼呢？請看下節

構造期望的響應資料

App 中常有一些介面會根據後端資料的不同而展現不同的樣式，那麼在開發過程中就期望後端介面能返回一些特定的資料。如果巴望著後端同學替你『造資料』那就不太現實了，可行的方式依然是上面提到的兩種，通過 OHHTTPStubs mock，或者使用 Charles
而 Charles 裡要構造資料又有兩種方式

即時修改響應

前面提到需要點擊兩次 Excute 才能完成一次 HTTP 要求，原因是，Charles 的斷點功能分別提供了修改 HTTP Request 和 Response 的機會
在點擊第二次 Excute 之前，我們可以即時修改響應的內容，點擊『Edit Response』，然後選一種合適的展示面板修改即可，比如如果是 JSON 響應的話，推薦使用 JSON 面板

映射本地檔案

另外一種方式就類似於 OHTTPStubs 了，可以將本地檔案指定為特定 URL 的響應
首先依然需要先讓 Charles 抓取到相應的 HTTP 要求，然後在請求上點右鍵，選擇最下面的『Map Local』

然後在彈出介面中選擇本地檔案 

這種方式最大的用處是，當後端介面開發尚未完畢時，App 端可以『自給自足』地完成完整的介面流程。
另外 Charles 還提供了對已有 Map 規則的匯入匯出功能，這樣就可以將編好的整套規則共用給其他同事了，方法是點擊菜單 Tools → Map Local，在彈出介面中點擊 Export 

最後劇透下，我正在考慮如何通過工具將 Map Local 與後端開發流程串連，更高效地實現 App 開發，至於時間點嘛……哈哈