Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

时间:2023-12-14 08:12:38

1.       目的

在模拟器的浏览器或app hybrid开发中遇到chrome调试代码为线上代码或者混淆代码时,可以利用fiddler/charles为genymotion配置代理,

可以方便的将代码替换为本地代码,此外还可以针对访问服务进行截获分析。

2.       配置

2.1    配置fiddler本地代理

2.1.1 Tools->Option->Connections

选中Allow remote computers to connect,并设置端口号(默认8888),如下图:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

2.1.2 Tools->Option->HTTPS

选中Caputure HTTPS Connects,并且勾选Ignore server certificate errors,如图:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

2.1.3 设置站点过滤

在fiddler右侧->Filters,勾选User Filters,在配置好genymotion代理后,访问www.baidu.com,如图:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

2.2    配置genymotion代理参数

2.2.1          进入wifi设置,长按genymotion连接的wifi,弹出修改连接参数的对话框,如图:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

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设置如图:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

2.3    配置真机代理参数

先将真机连接到PC所在的同一局域网,真机代理IP为PC的IP。如图:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

2.4    genymotion安装fiddler证书

如果在genymotion中访问https站点,需要在模拟器中安装fiddler证书。当在模拟器中配置好代理后,可访问代理站点下载证书。

在模拟器浏览器中输入http:10.32.82.50:8888(fildder所在PC的IP和fiddler代理端口号),代开代理站点后,点击FiddlerRoot certificate下载证书。

因为在WIFI上设置的代理,这里选择WIFI。

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

3.       配置本地站点(Ctrip H5站点专用,本地服务器nginx/apache搭建可参考其他文章)

3.1    配置IIS站点

配置与线上环境一致的站点路径,如线上路径为https://secure.ctrip.com/webapp/wallet

具体配置图如下:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

配置完成后,为本地站点绑定https 443端口,其中需要制作本地自签名https证书,如图:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

3.2    配置host文件

在host文件将线上域名替换成本机,如图:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

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到模拟器中即可调试。

首页调试源码:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

Fiddler拦截信息:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

5.       Genymotion中浏览器测试(所有WebApp都可用)

首页调试源码:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

Fiddler拦截信息:

Android WebApp开发使用Genymotion连接Fiddler2/Charles代理调试

6.       结语

通过以上的配置,可以基本解决调试过程中遇到的代码混淆问题,还你一个熟悉的代码环境。