Android WebApp開發使用Genymotion串連Fiddler2代理調試

標籤：

1.       目的

在模擬器的瀏覽器或app hybrid開發中遇到chrome調試代碼為線上代碼或者混淆代碼時，可以利用fiddler為genymotion配置代理，

可以方便的將代碼替換為本地代碼，此外還可以針對訪問服務進行截獲分析。

2.       配置

2.1    配置fiddler本地代理

2.1.1 Tools->Option->Connections

         選中Allow remote computers to connect，並設定連接埠號碼(預設8888)，如：

 

2.1.2 Tools->Option->HTTPS

         選中Caputure HTTPS Connects，並且勾選Ignore server certificate errors，

 

2.1.3 佈建網站過濾

         在fiddler右側->Filters，勾選User Filters，在配置好genymotion代理後，訪問www.baidu.com，

 

2.2    配置genymotion代理參數

2.2.1          進入wifi設定，長按genymotion串連的wifi，彈出修改串連參數的對話方塊，

 

2.2.2          設定wifi代理ip和連接埠

注意：android和genymotion模擬器中填寫的代理ip不能是fiddler所在PC的IP，因為模擬器和PC不在同一個網段，

預設情況下，android模擬器中10.0.2.2代表PC，genymotion模擬器中10.0.3.2代表PC。Genymotion設定

 

2.3    配置真機代理參數

先將真機串連到PC所在的同一區域網路，真機代理IP為PC的IP。

 

2.4    genymotion安裝fiddler認證

如果在genymotion中訪問https網站，需要在模擬器中安裝fiddler認證。當在模擬器中配置好代理後，可訪問代理網站下載認證。

在模擬器瀏覽器中輸入http:10.32.82.50:8888(fildder所在PC的IP和fiddler代理連接埠號碼)，代開代理網站後，點擊FiddlerRoot certificate下載認證。

因為在WIFI上設定的代理，這裡選擇WIFI。

 

 

3.       配置本地網站

3.1    配置IIS網站

配置與線上環境一致的網站路徑，如線上路徑為https://secure.ctrip.com/webapp/wallet，

具體配置圖如下：

 

配置完成後，為本地網站綁定https 443連接埠，其中需要製作本地自簽名https認證，

 

 

3.2    配置host檔案

在host檔案將線上網域名稱替換成本機，

 

4.       Genymotion中app內訪問測試(Ctrip HybridApp專用，其他請看第5點)

App中調試代碼需要依賴lizard grunt打包程式，命令如下：

grunt package2.0 --path=%Wallet_App%\Wallet  --debug

使用debug打包時，需要修改gruntCfg.js中的相關配置，主要是host參數，配置成本機IP和port。如host: "10.32.82.50:80"。

Host參數主要是配置打包產生時webresource的所在的網站，debug模式打包不產生webresource目錄，而是直接在lizardlocalroute.js中將路由指向本機webresource路徑。

將打包產生的檔案push到模擬器中即可調試。

 

首頁調試源碼：

 

Fiddler攔截資訊：

 

5.       Genymotion中瀏覽器測試(所有WebApp都可用)

 

首頁調試源碼：

 

Fiddler攔截資訊：

 

6.       結語

通過以上的配置，可以基本解決調試過程中遇到的代碼混淆問題，還你一個熟悉的代碼環境。

Android WebApp開發使用Genymotion串連Fiddler2代理調試