charles前端應用

咱們在開發移動端頁面的時候，抓包是必不可少的調試手段。抓包工具推薦使用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塊區域：

1. 規則，你能夠自定義多套規則，一套規則包括對哪些url進行哪些修改。
2. url集，你能夠配置對那些url進行修改
3. 具體的修改規則

上圖中能夠看出，我配置了一套規則，針對主站內全部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。這樣咱們就能夠直接看到咱們的修改在線上的效果了。這對於本地環境不齊全，必須依賴線上環境查看效果的狀況很適用。

配置方法很簡單，以下：