Charles抓包—App資源代理

在開發Hybrid App的時候，會遇到因為native環境不同，出現的樣式不對及程式碼bug。

因為需要寫一點原生程式碼與native進行互動，而安卓和ios的互動方式不一樣並且一定要在app中除錯，所以會遇到反覆修改提交打包等待發版然後在app上檢視效果的等待及多餘步驟。

或者打包一個嵌入了本地連結的app在手機上自己除錯。中間多了一步麻煩app同事的步驟，次數多了怕被白眼。

於是！我們要自力更生，能自己解決的問題絕不麻煩別人。於是我想到了Charles代理。

Charles主要功能:

1. 將Charles設定成系統代理
2. 擷取移動裝置上的網路請求包
3. 代理轉發
4. 支援https請求抓包

一. 將Charles設定成系統代理

1. 啟動Charles客戶端
2. Proxy -> macOS Proxy(Charles 是通過將自己設定成代理伺服器來完成抓包的，勾選系統代理後，系統本地發出去的請求都能被擷取下來。如果只抓取APP的包的話，可關閉此配置，這樣不會出現太多的資料看著比較亂。)

二、移動端抓包

1. Proxy -> Proxy Settings
2. 預設埠是8888

3. 檢視本地IP

4.配置手機代理

設定代理之後，Charles字移動端裝置和伺服器之間擔當了中轉的任務。攔截了裝置的請求後，Charles可以轉發給伺服器也可以代理到本地。

開啟app訪問頁面，就可以看到抓包後的資料了。

三、代理到本地

接下來就是最關鍵的，我們在請求中尋找需要代理的資源。

我線上的專案使用webpack+react打包的，所以只需要修改關鍵的js和css就好了。

1. 找到專案樣式
2. 右鍵選中
3. 選擇 Map Remote

4.修改代理路徑，Host可以填本地ip/127.0.0.1/localhost

埠號根據實際情況填寫。因為我的專案執行在9000埠，所以這裡的Port我填9000。

5. Tools -> Map Remote

我們可以通過勾選Enable Map Remote 按鈕禁用或者開啟代理。

6. 修改程式碼除錯專案

將商場導購的字型顏色變成紅色。

等待編譯完成，app內嵌頁面的字型也通過樣式代理，字型變成了紅色。

.guide-name {
    font-size: 30px;
    color: red;//#333333
    width: 95%;
    @extend .txt_eclip;
}
複製程式碼