Charles抓包—App資源代理
摘要：
在開發Hybrid App的時候，會遇到因為native環境不同，出現的樣式不對及程式碼bug。
因為需要寫一點原生程式碼與native進行互動，而安卓和ios的互動方式不一樣並且一定要在app中除錯，所以會遇到反覆修改提交打包等待發版然後在app上檢視效果的等待及多餘步驟。
或者打包...
在開發Hybrid App的時候，會遇到因為native環境不同，出現的樣式不對及程式碼bug。
因為需要寫一點原生程式碼與native進行互動，而安卓和ios的互動方式不一樣並且一定要在app中除錯，所以會遇到反覆修改提交打包等待發版然後在app上檢視效果的等待及多餘步驟。
或者打包一個嵌入了本地連結的app在手機上自己除錯。中間多了一步麻煩app同事的步驟，次數多了怕被白眼。
於是！我們要自力更生，能自己解決的問題絕不麻煩別人。於是我想到了Charles代理。
Charles主要功能:
- 將Charles設定成系統代理
- 擷取移動裝置上的網路請求包
- 代理轉發
- 支援https請求抓包
一. 將Charles設定成系統代理
- 啟動Charles客戶端
-
Proxy->macOS Proxy(Charles 是通過將自己設定成代理伺服器來完成抓包的，勾選系統代理後，系統本地發出去的請求都能被擷取下來。如果只抓取APP的包的話，可關閉此配置，這樣不會出現太多的資料看著比較亂。)
二、移動端抓包
-
Proxy->Proxy Settings - 預設埠是8888
3. 檢視本地IP
4.配置手機代理
設定代理之後，Charles字移動端裝置和伺服器之間擔當了中轉的任務。攔截了裝置的請求後，Charles可以轉發給伺服器也可以代理到本地。
開啟app訪問頁面，就可以看到抓包後的資料了。
三、代理到本地
接下來就是最關鍵的，我們在請求中尋找需要代理的資源。
我線上的專案使用webpack+react打包的，所以只需要修改關鍵的js和css就好了。
Map Remote
4.修改代理路徑，Host可以填本地 ip/127.0.0.1/localhost
埠號根據實際情況填寫。因為我的專案執行在9000埠，所以這裡的Port我填9000。
-
Tools -> Map Remote
我們可以通過勾選 Enable Map Remote 按鈕禁用或者開啟代理。
- 修改程式碼除錯專案
將商場導購的字型顏色變成紅色。
等待編譯完成，app內嵌頁面的字型也通過樣式代理，字型變成了紅色。
.guide-name {
font-size: 30px;
color: red;//#333333
width: 95%;
@extend .txt_eclip;
}
複製程式碼
