iOS Charles Proxy 教程

　　有時不得不認可——咱們曾經寫過一些代碼，它們不正確，但咱們又沒法調試。更麻煩的是，你須要經過網絡和其它系統通信的時候。
　　
　　幸運的是，Charles 代理可以讓網絡調試變得簡單。
　　
　　Charles 代理位於 App 和網絡之間。全部的網絡請求、響應都必須通過 Charlse 代理，所以你就可以觀察和修改所通過的數據，以測試 App 的行爲。
　　
　　在這篇 Charles 代理教程中，你將經過親自動手操做來學習它（以及更多）。
　　
　　開始
　　
　　首先須要下載最新版本的 Charles Proxy(寫到這裏的時候是 v4.1.1)。雙擊 dmg 文件，將 Charles 圖標拖進應用程序文件夾以安裝它。
　　
　　Charles Proxy 難免費，但你能夠有 30 天的試用期。Charles 在試用版模式下每次只能運行 30 分鐘，所以你在本教程學習過程當中你可能須要重啓它。
　　
　　注意：Charles 是一個 Java App，支持 macOS、Windows 和 Linux。這篇 Charles Proxy 教程只針對 macOS，可能在其它平臺下稍有不一樣。
　　
　　點開 Charles，它會詢問是否容許它配置你的網絡設置。
　　
　　點擊 Grant Privileges 而後輸入你的密碼。Charles 啓動後會開始記錄網絡事件。你能夠看到左邊的面板中會加入一些網絡事件。
　　
　　注意：若是你沒法看到事件，多是你沒有受權或者開啓了另一個代理。若是須要幫助，請查看 Charles 的 FAQ 頁。
　　
　　用戶界面很是簡單，哪怕你沒用過它也可以看懂。有許多內容都被隱藏到按鈕和菜單下面，可是在工具欄中有幾個東西是你必須認識的：
　　
　　第一個」掃帚「按鈕用於清除全部已記錄的活動的當前會話。
　　
　　第二個」記錄/暫停「按鈕若是當前正在記錄顯示爲紅色，不然顯示爲灰色。
　　
　　從」小烏龜「按鈕到」鉤鉤」按鈕用於一些常見操做，好比流量調節、斷點和建立請求等。將鼠標懸停在每一個按鈕上，你能夠看到它們的簡單描述。
　　
　　最後兩個按鈕是經常使用工具和設置。
　　
　　如今，點擊紅色的「記錄/暫停」按鈕，中止記錄。
　　
　　左面板能夠在 Structure 和 Sequence 視圖之間切換。當選擇 Structure 視圖時，全部的活動是以網站地址的形式進行分組的。你能夠經過點擊網址旁邊的箭頭查看每一個請求。
　　
　　當選擇 Sequence 視圖時，你能夠按時間順序查看連續的事件列表。當調試你的 app 時，大部分時候你都會停留在這個界面。
　　
　　默認，Charles 將請求/響應合併在一個窗口中顯示。但我建議你將它們分紅兩個單獨事件進行顯示，這樣會更清楚。
　　
　　點擊 Charles\Preferences ，選擇 Viewers 標籤，反選 Combine request and response ，而後 OK。爲了使設置生效，你須要重啓 Charles。
　　
　　嘗試操做一下用戶界面，觀察各類事件。你會注意到一個特別的地方：對於 HTTPS 事件，你沒法查看細節。
　　
　　SSL/TLS 用於對敏感的請求響應信息進行加密。你可能想，Charles 對 HTTPS 事件就沒招了嗎？No！Charles 有一種特殊的方法，可以繞開加密規則，後面咱們會介紹。
　　
　　代理詳解
　　
　　你可能好奇，「Charlse 是如何作到這一切的呢？」
　　
　　Charles 是一個代理服務器，這意味着它能夠插入到 App 和計算機的網絡鏈接之間。Charles 會自動配置你的網絡設置，將你的網絡設置成全部的通訊都必須通過它轉發。這樣就使得 Charles 可以監聽全部的從計算機發出和收到的網絡事件。
　　
　　代理服務器的威力十分強大，但很容易被濫用。所以 SSL 就變得十分重要了：它會對數據進行加密，防止代理服務器和其它中間件竊取敏感信息。
　　
　　可是在咱們的例子裏，咱們必須用 Charles 來嗅探咱們的 SSL 信息，以便咱們可以進行調試。
　　
　　SSL/TLS 信息經過受信任的第三方即所謂的「證書發行機構」來建立證書。
　　
　　Charles 也能夠生成它本身的自簽名證書，你能夠將它們安裝到 Mac 和 iOS 設備中並用於 SSL/TLS 加密。由於這個證書並非由受信任的第三方證書發行機構發出的，所以你必須手動告訴設備去信任它。當證書被安裝並被信任以後，Charles 就能看懂 SSL 事件了。
　　
　　由於黑客們也是使用中間件來嗅探網絡通信的，即「中間人攻擊」。通常狀況下，你不該該信任任何隨機的證書，不然你的網絡將再也不安全。
　　
　　有幾種狀況會致使 Charles 的「中間人策略」不生效。例如，有的 App 會使用「SSL pinning」來強化安全。SSL pinning 表示 App 中會有一份 SSL 證書的公鑰，在開始通信以前，App 會用這個證書來檢驗網絡鏈接。Charles 的 key 確定是和公鑰不匹配的，App 會拒絕本次通信。
　　
　　除了記錄事件，Charles 還能夠實時修改數據，而後記錄下來以便查看，甚至能夠故意模擬錯誤的網絡鏈接。Charles 確實很強大！
　　
　　Charles Proxy 和 iOS 設備
　　
　　要讓 Charles 做爲你網絡中的任意計算機和設備（包括 ios 設備）的代理，也很簡單。
　　
　　首先，在 Charles 中點擊 Proxy(下拉菜單)\macOS Proxy ，取消勾選以關閉 macOS Proxy。這樣，你就只能查看 iOS 設備上的流量了。
　　
　　而後，點擊 Proxy\Proxy Settings，記下 Proxies 一欄中的端口號，默認是 8888。
　　
　　而後點擊 Help\Local IP Address ，記下計算機的 IP 地址。
　　
　　拿起你的 iOS 設備，打開設置程序，點擊 Wi-Fi，檢查是否和計算機處於同一網絡。而後點擊這個 WiFi 鏈接旁邊的 ⓘ 按鈕。 找到 HTTP Proxy ，點擊 Manual。
　　
　　在 Server 中輸入 Mac 的 IP 地址，Port 一欄輸入 Charles HTTP 代理端口號。點擊返回按鈕或者按下 Home 鍵，修改會自動保存。
　　
　　若是以前已經中止了 Charles 的記錄，則點擊「記錄/暫停」按鈕，開始再次記錄。
　　
　　在 Mac 的 Charles 中，會彈出一個警告，問你是否容許 iOS 設備進行鏈接。請點 Allow 容許。若是你沒有當即看到這個提示也不要緊，稍等一兩分鐘，它就會出來了。
　　
　　如今你能夠在 Charles 中看到來自於設備的網絡活動了！
　　
　　而後，在 iOS 設備，打開 Safari，瀏覽網址 http://www.yszxylpt.com
　　
　　這會彈出一個窗口，問你是否安裝一個 Profile 或證書。在詳情部分，你應當看到這是一個自簽名的 Charles 證書。點擊 Install，而後再次點 Install。最終，點 Done。
　　
　　蘋果其實想確保你是想安裝這個證書的！再次強調，不要安裝任何隨機的證書，不然你的網絡將再也不安全！在本教程的最後，你須要刪除這個證書。
　　
　　嗅探別人的 App
　　
　　若是你像其餘開發者同樣，你會好奇事情究竟是怎麼發生的。
　　
　　Charles 有幾個工具能知足你的這份好奇心，它們可以查看任何 App 的網絡通訊——哪怕不是你本身的 App。
　　
　　打開設備上的 App Store，搜索並安裝 Weather Underground。這個免費 App 在大部分國家都是有效的。若是不行，或者你想看看別的 App，請隨意下載其它 App。
　　
　　在下載這個 App 時，你會在 Charles 中看到有海量活動顯示。App Store 真的很話癆！
　　
　　當 App 安裝完，打開這個 App，而後點擊 Charles 的「掃帚」圖標，清除最近活動。
　　
　　在這個 App 中，輸入 90210 做爲郵編，輸入 Beverley Hills 做爲你的地址。若是你使用其它地址做爲當前地址，則 App 抓取數據的 URL 也會改變，由於你的地址不同了啊。這樣在本教程後面的內容極可能就對不上了。
　　
　　在 Structure 視圖中有大量的站點被列出來！這是來自於 iOS 設備上的所有活動，而不只僅是來自 Weather Underground App 的。
　　
　　切換到 Sequence 視圖，而後在過濾器中輸入 wund，以便只顯示 Weather Underground 的活動。
　　
　　你如今只看到幾個對 api.wunderground.com 的請求了。點擊其中一個。
　　
　　在 Overview 欄中，顯示的是請求的細節，但不是所有。不管請求仍是響應都看不到太多內容。Overview 會告訴你這是爲何：「SSL 代理沒有在這個主機上開啓：請在 Proxy Settings, SSL locations 中啓用它。」 。接下來咱們就啓用它。
　　
　　點擊 Proxy\SSL Proxying Settings，點擊 Add; 在 Host 中輸入 api.wunderground.com for the Host，Port 中留空，而後按 OK 關閉窗口。
　　
　　回到 Wunderground app，向下拉，刷新數據。若是 app 沒有刷新數據，你須要關閉進程，而後從新打開。
　　
　　哇！沒有加密過的請求！找一條 URL 中含有 forecast10day 字樣的請求。這個請求包含了用於渲染天氣界面的內容。
　　
　　讓咱們來玩點有趣的事情，在 app 得到數據以前修改數據。你可讓 app 中止或者更搞笑一點嗎？
　　
　　在 Sequence 列表中右鍵，點擊這條請求，而後在彈出菜單中點擊 Breakpoints。如今，每到請求這個 URL 時，Charles 會暫停，這樣你就能夠對這個請求和響應進行修改了。
　　
　　再次在 App 中下拉。
　　
　　當請求發出，一個新的名爲 Breakpoints 的標籤頁顯示。不作任何修改，直接點擊 Execute。再過一會，Breakpoints 標籤頁會在響應回來時再次顯示。
　　
　　點擊上端的 Edit Resonse 標籤。在下方，選擇 JSON text。找到 temperature，將它的值修改成某個不可能的值，好比 9800。
　　
　　注意：若是你在編輯請求或響應時花的時間太長，App 可能會超時，沒法顯示出任何內容。若是編輯完氣溫後沒有顯示，請加快動做再試一遍。
　　
　　9800°F 實在是熱得不行! Wunderground 沒法顯示超過 1000º 的氣溫。我想這個 App 是沒法顯示太陽表面的天氣了。這個 App 絕對只能評爲 1 星。
　　
　　用 Proxy\Breakpoint www.boayulevip.cn Settings 慘淡刪除剛纔添加的斷點。
　　
　　反選 api.wunderground.com 去臨時禁用它，或者高亮選中這行，點擊 Remove 刪除它。下拉刷新 App，氣溫又恢復了正常值。
　　
　　而後，點擊「小烏龜」按鈕，開始調整或模擬緩慢的網絡。點擊 Proxy\Throttle Settings，查看有效的設置。默認是 56 kbps，很是卡的網絡。經過調整這裏的設置，你能夠模擬出數據丟失、可靠性問題或者高延遲的狀況。
　　
　　刷新 App，縮放地圖或者搜索其它地方。真是慢得讓人痛不欲生！
　　
　　這是一種測試你的 App 處於惡劣網絡質量下的好辦法。想一下用戶在地鐵上或者電梯內的狀況吧？你不想讓你的 App 在這種狀況下丟失數據甚至崩潰吧？
　　
　　蘋果的 Network Link Conditioner 提供了相似功能，但 Charles 容許你更精細地控制網絡設置。例如，你能夠只對特定 URL 進行流量調節，以模擬你的服務器響應緩慢，而不是全部網絡鏈接都慢。
　　
　　記得在測試完後關閉流量調節。最糟糕的莫過於，花了一個小時的調試才發現忘記關流量調節閥了！
　　
　　調試本身的 App
　　
　　Charles Proxy 對於調試/測試本身的 App 尤爲好用。例如，你能夠檢查服務器的響應，確保 JSON 中的 key 定義正確，全部字段中的數據類型都正確。你甚至能夠用流量調節閥模擬糟糕的網絡鏈接，檢驗 App 中的超時處理和錯誤處理邏輯。
　　
　　你能夠用一個 iMessage App 「Charles in Charge」來進行測試，這個 App 是我專爲本教程編寫的。
　　
　　若是你是一個 80 後，你可能知道曾經流行的 Scott Baio 主演的漫畫 Charles in Charge。「Charles in Charge」 iMessage app 使用了微軟必應的 Image Search API 來提供可以在 iMessage 中發送的人物圖片。你首先須要建立一個免費的必應 Image Search API key，以用於示例 App。首先在這裏註冊一個微軟 Cognitive Services 帳號。打開你的郵箱，而後點擊檢驗連接，完成註冊。爲了生成 API key，這是必須的。
　　
　　註冊完畢，在帳號信息頁，點擊 Get Started for Free 或者 Subscribe to new free trials 連接（使用哪個取決於你是如何進入該頁的）；勾選 Bing Search - Free，點擊 I agree next to the terms and conditions，而後點擊 Subscribe。
　　
　　訂閱以後，你會得到兩個 key。點擊旁邊的一個 copy 連接將它拷貝到剪貼板，等會會用到。
　　
　　而後，下載Charles in Charge。用 Xcode 打開 CharlesInCharge.xcodeproj。
　　
　　展開 MessagesExtension 文件夾，你會看到幾個 Swift 文件。
　　
　　CharlesInChargeService 負責調用必應來搜索圖片，而後用 ImageDownloadService 下載這個 App 中要用到的每張圖片。
　　
　　在 CharlesInChargeService 的 findAndDownloadImages(completion:) 方法中，你會看到 BingImageSearchService 的初始化方法中，subscriptionKey 參數指定了一個空字符串。
　　
　　將你從微軟 Cognitive Services 網站上拷貝的 API key 粘貼到這裏。
　　
　　在模擬器中運行 App 進行測試。
　　
　　注意：請在編譯以前，確保 scheme 選擇的是 MessagesExtension scheme。
　　
　　在 Charles 中，點擊 Proxy ，將 macOS www.vboyl130.cn Proxy 打開 (若是沒有打開的話)。
　　
　　而後點擊 Proxy\SSL Proxying Settings ，將 api.cognitive.microsoft.com 添加到列表中。
　　
　　而後在模擬器中，安裝 Charles Proxy SSL 證書，以便可以代理 SSL 請求。先關閉模擬器。在 Charles 中，點擊 Help\SSL Proxying\Install Charles Root Certificate in iOS Simulators（安裝Charles 根證書到模擬器中）。
　　
　　返回 Xcode，在模擬器中運行 App。當 iMessage 打開，找到 Charles in Charge 並選擇它。等待圖片加載……然而什麼也沒發生！怎麼回事？
　　
　　在控制檯窗口，你會看到：
　　
　　Bing search result count: 0
　　
　　這代表 App 沒有找到任何結果，或者數據沒法解析。
　　
　　首先檢查你有沒有從後臺 API 得到數據。
　　
　　在 Charles 中，在過濾器中輸入 cognitive 以便輕鬆看到 Bing Image Seearch 請求。點擊列表中的請求，選擇 Response 標籤頁，選擇底部的 JSON 文本。查看 JSON 內容，你會發現實際上搜索結果成功返回了。
　　
　　所以，問題確定出在 BingImageSearchService 中。
　　
　　在 Xcode 打開這個類，查找到將搜索結果映射爲 SearchResult 結構的代碼：
　　
　　guard let title = hit["name"] as? String,
　　
　　let fullSizeUrlString = hit["contenturl"] as? String,
　　
　　let fullSizeUrl = URL(string: fullSizeUrlString),
　　
　　let thumbnailUrlString = hit["thumbnailurl"] as? String,
　　
　　let thumbnailUrl = URL(string: thumbnailUrlString),
　　
　　let thumbnailSizes = www.tengxun10001.cn hit["thumbnail"] as? [String: Any],
　　
　　let thumbnailWidth = www.wanmeiyule11.cn thumbnailSizes["width"] as? Float,
　　
　　let thumbnailHeight = www.wanmeiyule22.cn thumbnailSizes["height"] as? Float else {
　　
　　return nil
　
　　啊哈？SearchResult 會在某個 key 不存在時返回爲 nil。將這些 key 和 Charles 中的響應數據進行對比，終於找到了問題：大小寫錯了。
　　
　　若是你眼睛夠尖，你會發現，contentUrl 和 thumbnailUrl 在解析時沒有將 U 大寫。修改爲正確的 key，而後再次運行 App。
　　
　　搞定！如今，「Charles 當家」！
　　
　　刪除 Charles 證書
　　
　　曾經，Charles 建立了一個能夠在全部人設備上使用的證書。不幸的是，Charles 如今會建立單獨的證書。這能減小利用這個證書進行「中間人攻擊」的機率，但那只是相對於技術手段來講而已。所以，你應當牢記，在使用完以後刪除這個 Charles 證書。
　　
　　首先，從 macOS 上刪除證書。從 Application\Utilities 文件夾中打開鑰匙串程序。在搜索欄中輸入 charles proxy，從搜索結果中將全部證書刪除。固然極可能只須要刪一個證書。刪完後關閉鑰匙串程序。
　　
　　而後從 iOS 設備中刪除證書。打開設置 App，找到通用\描述文件和設備管理。在配置描述文件中，你會看到 1 個或多個和 Charles Proxy 相關的條目。點開一個條目而後點擊刪除描述文件。重複一樣步驟刪除全部 Charles Proxy 證書。
　　
　　在 iOS 模擬器中，描述文件和設備管理是無效的。要刪除 Charles 證書，只能經過模擬器菜單下的「重置內容和設置」來重置模擬器。
　　
　　結束
　　
　　但願你喜歡這篇 Charles Proxy 教程！Charles Proxy 還有許多功能和細節沒有在本文中涉及。更多內容請參考Charles 官網。你使用 Charles 的時間越長，你就會發現更多的功能。你能夠下載完成後的帶有正確 JSON 格式的Charles in Charge App。
　　
　　你還能夠參考維基百科關於 SSL/TLS 的解釋。蘋果極有可能最終要求全部 App 使用安全網絡鏈接，所以你應該儘快實現它。
　　
　　另外，在 macOS 下還可使用 Paw。它和 Charles 是天生的一對，用於建立新的 API 請求和測試參數。
　　
　　你還知作別的網絡調試工具嗎？或者你有一些調試經驗須要分享？請在下面分享出來吧！