不求服務端,自己改介面!Charles抓包工具在Android/iOS開發中的應用

WeaponZhi發表於2017-10-22

喜歡小之的文章的可以關注公眾號「WeaponZhi」持續關注動態

前言

作為移動開發工程師,平時開發階段跟介面相關的工作都是要和服務端的小夥伴進行對接的,在對接的過程中一定會有一些不太方便的地方。

那麼,今天我要給大家介紹一下「Charles」這款抓包軟體,使用 Charles ,資料介面相關的介面和除錯工作將變的高效、簡單、痛快。

我將具體介紹「查閱介面資料」、「介面資料替換」、「請求重定向」這三個功能在具體開發時候的使用姿勢。

這篇文章主要是介紹 Charles 在開發階段的使用方式,突出實用性,至於 Charles 的介紹和配置,不是我們本文的重點,還沒配置的同學可以參考這篇博文,很詳細了:
Charles 使用心得

查閱介面資料

我們平時開發的時候,經常要除錯介面,需要看一下介面返回的資料。大部分的時候,我們是通過我們自己配置的 Log 系統來進行查閱,這種方式雖然是可以能達到我們的需求,但實際上還是比較麻煩的,一些準備工作和操作也比較多,那麼我們現在擁有了 Charles,一切將變的簡單粗暴,一目瞭然。

我們配置好了之後,所有的瀏覽器請求都會在 Charles 中顯示,如果你的手機和模擬器也配置好了代理,那麼同樣,模擬器和手機走的所有請求也會被列出來。host 閃過一下黃色標記,表示這個 host 下有一個新的請求剛剛走過。

Charles 整體介面
Charles 整體介面

圖中左側是 Charles 抓到的所有包的彙總,以請求的 host 為分類,右側是這個請求具體的資訊,包括請求頭,返回的資料以及和這個請求相關的所有資訊,如果資料是 JSON 格式,那麼它會自動的格式化,如果是圖片流,也會直接把圖片顯示出來等等,你想要有關這個介面的一切,都能一目瞭然。

不過有時候,我們的請求有點太多了,我們需要觀察的就是一些特殊的 host 的請求。比如在這裡,我們希望看到的就是「www.jianshu.com」這個 host 下的請求,那麼我們可以通過Proxy->Recording Settings來設定過濾項,不過我一般會直接右擊需要的 host 選中force進行篩選,如下圖所示:

Focus
Focus

我們可以看到,這樣其他的 host 都會被歸類到Other Hosts中了。

Other Hosts
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 中看到的資料是這樣的:

JSON 資料
JSON 資料

在應用中的日誌顯示是這樣的:

Log
Log

這時候,我們想修改下from欄位的值該怎麼做呢?很簡單。只需在Tools->Rewrite中選擇Enable Rewrite,再 add 一個Rewrite Rule,在裡面填入你想替換的資料即可:

替換資料
替換資料

點選確定,我們重新請求一下,再看一下返回資料:

更改後的資料 Log
更改後的資料 Log

注意到了嗎,返回的資料真正的被替換掉了,從此以後,我們自己也可以輕易模擬資料了!再也不用麻煩服務端的小夥伴了!

請求重定向

請求重定向是啥意思吧,我們設想有這樣一個現實的場景:

服務端的童鞋先把資料的格式定義好了,比如上面的MessageBean具體的欄位先給到我們了,然後給了我們一個測試地址和正式地址,但正式地址還沒布好,我們只能先用測試地址來寫邏輯和測試。

我們這個時候有了重定向,我們可以在寫邏輯的時候,把請求的地址依然用的是正式地址,但通過使用 Charles 的重定向功能,我們在執行的時候,實際上走的請求是測試地址的請求,等到回頭服務端的童鞋把正式環境布好的時候,我們不需要特意去程式碼中更改請求地址,減少了修改可能造成的出錯可能。

還是舉例上面的例子,我們剛剛請求的地址,我們也有日誌列印出了它的實際請求地址和返回:

原來的 Response
原來的 Response

我們現在把這個請求重定向到www.baidu.com這個地址上,按理說如果重定向成功了,那麼應該是返回百度首頁 html 的頁面程式碼資料,我們實際操作下看看:

重定向操作
重定向操作

我們將請求地址改成我們設定的地址:

@GET("ajax.php")
Observable<MessageBean> getCall();複製程式碼

現在我們重新執行一下,看一下請求日誌:

重定向後的 Response
重定向後的 Response

我們發現,同樣的地址,返回結果已經不一樣了,返回的是百度首頁的 html 程式碼了。

實際上平時用的最多的就是重定向本地檔案了,使用剛剛那個選項下面的「Map Local」操作,和上面操作一樣,只是在 Add 中新增一個本地的 JSON 檔案,這樣你在請求的時候直接就能返回本地檔案的資料了,這樣做的好處就是,你想改資料,只需要把本地檔案修改儲存,再次請求,資料就已經變化了,簡直是太方便了。

其他功能

Charles 還有非常多好用的功能有待大家自己去發掘,比如斷點功能重發請求功能。這裡再說一個比較好用的功能,那就是模擬慢網的功能。對於我們平時開發來說,這個功能還是很實用的,很多時候,一些 bug 都是在這樣的一種特殊情況才能復現。

開啟方式就是Proxy->Start Throttling,同時通過Proxy->Throttling Settings可以進行更細緻的網路設定。

模擬慢網
模擬慢網

總結

相信大家已經迫不及待的來使用 Charles 了,這款神器可以說是開發必備。當然,作為程式設計師,我們更應該瞭解到軟體產品產出的不易,希望大家可以支援正版,尊重他人的勞動成果,從正規渠道進行購買哦


我的公眾號期待您的關注

相關文章