喜歡小之的文章的可以關注公眾號「WeaponZhi」持續關注動態
前言
作為移動開發工程師,平時開發階段跟介面相關的工作都是要和服務端的小夥伴進行對接的,在對接的過程中一定會有一些不太方便的地方。
那麼,今天我要給大家介紹一下「Charles」這款抓包軟體,使用 Charles ,資料介面相關的介面和除錯工作將變的高效、簡單、痛快。
我將具體介紹「查閱介面資料」、「介面資料替換」、「請求重定向」這三個功能在具體開發時候的使用姿勢。
這篇文章主要是介紹 Charles 在開發階段的使用方式,突出實用性,至於 Charles 的介紹和配置,不是我們本文的重點,還沒配置的同學可以參考這篇博文,很詳細了:
Charles 使用心得
查閱介面資料
我們平時開發的時候,經常要除錯介面,需要看一下介面返回的資料。大部分的時候,我們是通過我們自己配置的 Log 系統來進行查閱,這種方式雖然是可以能達到我們的需求,但實際上還是比較麻煩的,一些準備工作和操作也比較多,那麼我們現在擁有了 Charles,一切將變的簡單粗暴,一目瞭然。
我們配置好了之後,所有的瀏覽器請求都會在 Charles 中顯示,如果你的手機和模擬器也配置好了代理,那麼同樣,模擬器和手機走的所有請求也會被列出來。host 閃過一下黃色標記,表示這個 host 下有一個新的請求剛剛走過。
圖中左側是 Charles 抓到的所有包的彙總,以請求的 host 為分類,右側是這個請求具體的資訊,包括請求頭,返回的資料以及和這個請求相關的所有資訊,如果資料是 JSON 格式,那麼它會自動的格式化,如果是圖片流,也會直接把圖片顯示出來等等,你想要有關這個介面的一切,都能一目瞭然。
不過有時候,我們的請求有點太多了,我們需要觀察的就是一些特殊的 host 的請求。比如在這裡,我們希望看到的就是「www.jianshu.com」這個 host 下的請求,那麼我們可以通過Proxy->Recording Settings
來設定過濾項,不過我一般會直接右擊需要的 host 選中force
進行篩選,如下圖所示:
我們可以看到,這樣其他的 host 都會被歸類到Other Hosts
中了。
這樣,我們平時查閱介面資訊就會變得簡單粗暴了。
介面資料替換
我們平時在開發過程中會經常遇到一些情況。比如你已經開始寫請求的程式碼了,但服務端那邊的介面還沒寫好,你的邏輯可能已經寫完卻沒有辦法去測試驗證,你只能乾等或者通過自己在程式碼中新增一些假資料來模擬請求,耗時耗力。
或者雖然你介面和服務端調通了,但你想做一些邊界值的測試,想修改請求返回的值或者引數,這不是一件容易的事,往往需要服務端的配合,如果我們能自己通過某種手段輕鬆的更改返回資料,豈不是一件能夠幫助我們提高程式碼容錯率的美事?
Charles 可以很輕易的辦到。
我們現在用Retrofit
寫一段簡單的請求程式碼:
//舉個例子!
private void request(){
Api.getDefault(HostType.MESSAGE)//HOST:http://fy.iciba.com/
.getCall()
.subscribe(new BaseObserver<MessageBean>()){
@Override
protected void onSuccess(MessageBean entry) throws Exception{
entry.show();//請求成功展示資料
}
@Override
protected void onFailure(Throwable e, boolean isNetWorkError) throws Exception{
}
});
}複製程式碼
這裡的getCall()
方法就是一個簡單的get
請求,完整的請求地址為:http://fy.iciba.com/ajax.php?a=fy&f=auto&t=auto&w=hello%20world
@GET("ajax.php?a=fy&f=auto&t=auto&w=hello%20world")
Observable<MessageBean> getCall();複製程式碼
MessageBean
是這樣的,我們定義了一個show()
方法來列印出欄位:
public class MessageBean {
public int status;
public content content;
public static class content {
public String from;
public String to;
public String out;
public String vendor;
public int errNo;
}
/** 定義 輸出返回資料 的方法 */
public void show() {
LogUtils.i("status:" + status + "\n" +
"from:"+ content.from + "\n" +
"to:"+ content.to + "\n"+
"out:"+ content.out + "\n" +
"vendor:"+ content.vendor + "\n" +
"errNO:"+ content.errNo);
}
}複製程式碼
我們進入應用,在 Charles 中看到的資料是這樣的:
在應用中的日誌顯示是這樣的:
這時候,我們想修改下from
欄位的值該怎麼做呢?很簡單。只需在Tools->Rewrite
中選擇Enable Rewrite
,再 add 一個Rewrite Rule
,在裡面填入你想替換的資料即可:
點選確定,我們重新請求一下,再看一下返回資料:
注意到了嗎,返回的資料真正的被替換掉了,從此以後,我們自己也可以輕易模擬資料了!再也不用麻煩服務端的小夥伴了!
請求重定向
請求重定向是啥意思吧,我們設想有這樣一個現實的場景:
服務端的童鞋先把資料的格式定義好了,比如上面的MessageBean
具體的欄位先給到我們了,然後給了我們一個測試地址和正式地址,但正式地址還沒布好,我們只能先用測試地址來寫邏輯和測試。
我們這個時候有了重定向,我們可以在寫邏輯的時候,把請求的地址依然用的是正式地址,但通過使用 Charles 的重定向功能,我們在執行的時候,實際上走的請求是測試地址的請求,等到回頭服務端的童鞋把正式環境布好的時候,我們不需要特意去程式碼中更改請求地址,減少了修改可能造成的出錯可能。
還是舉例上面的例子,我們剛剛請求的地址,我們也有日誌列印出了它的實際請求地址和返回:
我們現在把這個請求重定向到www.baidu.com
這個地址上,按理說如果重定向成功了,那麼應該是返回百度首頁 html 的頁面程式碼資料,我們實際操作下看看:
我們將請求地址改成我們設定的地址:
@GET("ajax.php")
Observable<MessageBean> getCall();複製程式碼
現在我們重新執行一下,看一下請求日誌:
我們發現,同樣的地址,返回結果已經不一樣了,返回的是百度首頁的 html 程式碼了。
實際上平時用的最多的就是重定向本地檔案了,使用剛剛那個選項下面的「Map Local」操作,和上面操作一樣,只是在 Add 中新增一個本地的 JSON 檔案,這樣你在請求的時候直接就能返回本地檔案的資料了,這樣做的好處就是,你想改資料,只需要把本地檔案修改儲存,再次請求,資料就已經變化了,簡直是太方便了。
其他功能
Charles 還有非常多好用的功能有待大家自己去發掘,比如斷點功能,重發請求功能。這裡再說一個比較好用的功能,那就是模擬慢網的功能。對於我們平時開發來說,這個功能還是很實用的,很多時候,一些 bug 都是在這樣的一種特殊情況才能復現。
開啟方式就是Proxy->Start Throttling
,同時通過Proxy->Throttling Settings
可以進行更細緻的網路設定。
總結
相信大家已經迫不及待的來使用 Charles 了,這款神器可以說是開發必備。當然,作為程式設計師,我們更應該瞭解到軟體產品產出的不易,希望大家可以支援正版,尊重他人的勞動成果,從正規渠道進行購買哦。
我的公眾號期待您的關注