解鎖Charles的姿式

Charles，做爲mac開發的好基友，不知道你們是否對它的使用姿式瞭如指掌。相信不少童鞋只是熟悉幾種簡單的功能，今天爲你們解鎖幾種高級姿式......但願可以幫到你們。

Charles是個啥

Charles是個啥，相信你們都會知道，若是真有不知道的，請百度之...
這裏我想告訴你們的是Charles能幫助咱們作什麼？
試想這樣幾種場景：

• A君在本地開發完頁面以後，想聯調接口，可是接口部署在測試服務器上，xxx.com ，這個時候聯調會有跨域問題，怎麼解決？

  解決這個問題的方式有不少，經過設置代理便可，這裏只講如何利用Charles實現臨時跨域。經過Charles的重寫https請求頭和響應頭功能，爲跨域的地址添加響應頭（Access-Control-Allow-Origin）實現跨域。

• 線上應用移動端表現異常，怎麼確認究竟是接口返回數據的問題仍是手機兼容性問題？

  截取手機上的https數據包，先判斷接口數據是否正常，若正常，排除接口問題，能夠確認是手機兼容性問題。

• 線上應用在手機端表現異常，接口正常，單純從代碼層面分析不出問題的產生緣由，那怎麼快速定位、解決問題？

  利用Charles的資源映射功能，將遠程js資源映射到本地或者測試環境的js文件，經過打日誌(直觀的alert)來排查問題。

• ...

還有不少場景就不一一介紹了，只介紹上面三種頻次高的場景。

Charles的用途總結起來就是：代理、抓包、改包！

誰會用到Charles

使用mac本的前端、測試、APP開發、後端開發....

待解鎖姿式：

本文只解鎖下面幾種重要姿式，可以應對上述三種場景。

• 截取https的數據包
• 修改https的請求響應頭
• 資源映射

  截獲mac下https的數據包

  解鎖該姿式分三步走：
• 1.安裝根證書 Charles Root Certificate。

  菜單 -> help -> SSL Proxying -> Install Charles Root Certifiate。

• 2.找到安裝好的Charles根證書，並信任它。

  mac下，找到應用程序 -> 實用程序 -> 鑰匙串訪問，打開鑰匙串後，選擇Charles Proxy CA 證書，雙擊，設置證書爲始終信任。

• 3.右鍵點擊某個域名，開啓https代理。
  

  

通過這三步猛如虎的操做，咱們就能夠抓到mac上的https請求數據包了，以下圖。

至此，https的請求頭、請求體、響應頭、響應體就能夠以明文的方式看到了。

截獲手機上的https數據包

解鎖該姿式分三步走：

• 1.完成截獲mac下https數據包的操做。
• 2.爲手機設置代理，代理的ip地址爲mac地址。

  菜單 -> Help -> Local IP Address ,便可查看mac IP 地址。
  

  

• 3.爲手機設置好代理以後，這時候，mac下Charles會彈出是否容許訪問的窗口，點擊Allow：
  

  

• 4.在手機上安裝並啓用Charles根證書

  • 菜單-> Help -> SSL Proxying -> install Charles Root Certificate on a Mobile Device or Remote Browser
    • 在手機上打開瀏覽器輸入chls.pro/ssl,下載charles根證書，並安裝
    • 這一步尤其重要。在IOS手機下，打開設置->通用->關於本機->證書信任設置，啓用剛纔下載的Charles證書。

• 5.最後一步，仍然要在Charles上選中某一域名下，右鍵點擊，容許代理。
  

  

  
  完成這幾步，咱們就能夠在Charles上看到手機上的https數據包了。

  修改https的請求響應頭

  前面講了一個場景，如何在開發階段實現跨域，也說到了利用charles修改https響應頭便可實現，具體操做步驟以下：

  這裏舉個例子，我想讓個人ifanqi.me域名下的頁面去訪問百度下面的一個接口，步驟以下：

• 1.菜單-> Tools -> Rewrite,打開設置面板。
• 2.添加一條規則

• 3.添加響應頭

通過這一頓猛如虎的操做，ifanqi.me下的頁面就能夠訪問百度的接口啦。有興趣的同窗能夠試下，經過修改請求頭和響應頭，咱們能夠隨意調用別的網站的接口，與此同時加深本身對http(s)協議的理解。

資源映射

資源映射，簡單來講就是，將某個線上資源的請求，映射到線上另外一個資源或者映射到本地文件。好比，資源映射能夠幫助我當請求xxx.com/index.js 的時候，實際上去請求mmm.com/index.js 、或者我本機硬盤下的某個js文件。這樣有什麼好處呢？就像上面說的，能夠快速排查、解決線上問題。

在本地js加上日誌（如console或者alert），快速定位問題。
當問題被解決以後，能夠驗證問題是否解決。

咱們解鎖下這兩種姿式。

遠程映射

• 1. 菜單-> Tools -> Map Remote，打開設置面板。
• 1. 設置映射前文件地址、映射後文件地址

這兩步設置完以後，就能夠實現遠程資源映射了。

本地映射

• 1.菜單-> Tools -> Map Local，打開設置面板。
• 2.設置映射前文件地址、選擇映射後的本地文件。
  這兩步設置完以後，就能夠實現本地資源映射了。

資源映射比較簡單，可是能夠幫助咱們排查、解決、驗證線上問題。

至此，幾種重要的Charles姿式就都解鎖了。除此，Charles還有不少有意思的功能，你們有時間能夠本身研究一下，都比較簡單。在這裏我簡單列一下：

1. 爲請求打斷點。
2. 併發請求測試。
3. 反向代理。
4. 限網速。
5. DNS欺騙。
6. ...

這些都比較簡單，感興趣的童鞋能夠去研究下，開發新的玩法。