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的包的話，可關閉此配置，這樣不會出現太多的數據看着比較亂。)

2、移動端抓包

1. Proxy -> Proxy Settings
2. 默認端口是8888

3. 查看本地IP

4.配置手機代理

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

打開app訪問頁面，就能夠看到抓包後的數據了。

3、代理到本地

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

我線上的項目使用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;
}
複製代碼