我們在開發移動端頁面的時候，抓包是必不可少的除錯手段。抓包工具推薦使用charles，介面簡潔、功能強大、配置靈活，走過路過不要錯過。這篇文章總結一下charles的主要功能以及能幫助我們解決的問題。
Rewrite
Charles上的解釋為Modify Requests and Responses as they pass through Charles, 當請求經過charles時去修改請求或者響應。通過Rewrite，我們可以很輕鬆地修改某個請求的請求和響應來達到我們的目的。我們開發中有一個問題是比較頭疼的，就是登入校驗問題。有兩種場景很不方便：第一是我們在本地啟動伺服器，除錯測試環境的資料，先假設你在本地用一些方法可以訪問到測試環境的介面，但這時候介面有登入校驗，就無法訪問到資料，流程走不下去；第二種是我們做hybird app，在app內巢狀wap頁面，使用app的登入介面，只有在app內才有登入狀態，如果我們想在電腦上進行除錯，也會受到登入校驗的限制。解決這個問題的辦法就是我們要在本地模擬登入狀態，因為現在絕大多數的網站的登入都是使用cookie來實現的，只要我們把正確的登入cookie嵌入到我們的請求中，那我們的請求就是有登入狀態的。我們使用Rewrite就可以輕鬆解決這個問題。
我們可以在Tools -> Rewirte開啟視窗，介面如下：
圖中分3塊區域：
- 規則，你可以自定義多套規則，一套規則包括對哪些url進行哪些修改。
- url集，你可以配置對那些url進行修改
- 具體的修改規則
上圖中可以看出，我配置了一套規則，針對主站內所有url進行修改，修改規則為兩條，下面我們來看一下這兩條規則如何配置。
第一條規則配置如下：
可以看到配置很簡單，Type選的是Add Header,即新增一個請求頭。然後把登入的cookie填到下面，然後就可以愉快的以登入狀態在本地訪問測試或者線上環境了。但是有一個不好的地方，cookie一般都有時效，所以時效的時候，你要重新更改配置中的cookie。
第二條規則是為了解決一個編碼問題，我在除錯過程中遇到一些請求返回的json字串在charles中顯示為亂碼，但是程式碼執行結果正常，抓包發現這些亂碼的請求的響應頭accept-encoding為gzip,deflate,br，有一個br編碼方式，服務端會優先採用br來編碼，而charles貌似不識別這種編碼，所以我在這條規則中將br去掉，這樣就可以正常顯示返回的json字串，規則如下：
Rewrite還有很多其他的用法，比如新增請求資料、修改請求資料、修改請求狀態碼等等。
Map Remote
Charles上的解釋為Modify the request location to map one remote location to another。就是把一個請求對映到另一個遠端請求上。我們可以通過這個功能，將本地的請求對映到測試/線上環境的請求中。一般我們本地的服務都是以ip開頭的，我們寫介面的時候，有兩種寫法：
- 帶上請求域名，比如
www.example.com/api/getData，可以直接在本地訪問線上介面，但是有跨域問題 - 不帶請求域名，比如
/api/getData,以頁面服務的域名為字首，這時訪問的介面就不是線上介面了
一般情況下采用第二種，比較靈活，這時候我需要配置一下對映了：
我這裡配置的是，所有本地/api/下的請求都對映到www.example.com/域名下，開發者可以根據自己情況自行配置。這其中有一個問題是本地服務的介面和線上的介面需要分開，不能把本地服務也對映到線上域名上去，區分方法一般是線上上介面加一個字首欄位，比如我這裡的/api/，這個可以和後臺約定一下，如果後臺不配合，你可以在本地開發環境自己加一個字首。這樣我們就可以在本地去訪問線上資料了，配合Rewrite，有登陸校驗的介面也是可以訪問的。
Map Local
Charles上的解釋為Use Local files serve remote locations。用本地檔案去服務遠端介面，我們可以用我們本地的檔案當做遠端介面的響應資料。這個功能一般有兩個應用：
-
修改介面的返回值。有一些介面，只會在滿足某些特殊條件下才會返回我們想要的值，如果這些條件很難復現，比如首充活動這種，你可以用本地json檔案當做介面的返回值，json檔案的值你當然可以隨意設定了。
-
用本地的js除錯線上環境。比如說我們網站中有一個main.js檔案，我們本地做了一些修改，想看一下這個修改如果放到線上是什麼效果，我們可以這樣做，我們直接訪問線上網站，把線上網站的main.js,對映到我們本地修改的main.js。比如
www.example.com/js/main.js對映到/User/xxx/project/js/main.js。這樣我們就可以直接看到我們的修改線上上的效果了。這對於本地環境不齊全，必須依賴線上環境檢視效果的情況很適用。
配置方法很簡單，如下：