由于安全策略限制,我们的开发机只能连入内网,且需要经过标装。

平安内部主要用到两张网,一张是办公开发用的PA_WLAN,另一张是移动设备接入的MA网,开发机与测试机由于不在同一网段,也就只能上演人鬼情未了了(用Mac开发的土豪例外);

另一方面,标装过的机器木有管理员权限,无法通过共享wifi给手机来创建局域网环境,于是另一条路被宣告堵死。

以往的方法都不灵,只能另辟蹊径咯~ 最终希望寄托在连通二者的USB线。

于是问题转化为:如何通过USB线实现开发机与测试手机通信,让手机的流量通过USB线走开发机网络

先介绍解题思路

  1. 通过Chrome的远程调试工具连通手机和开发机,实现通信;
  2. 将手机流量通过代理指向开发机端口;
  3. 开发机监听端口,接收代理流量

具体操作步骤

针对第一点,标装机需要安装ADB驱动(没有管理员权限的话到idesk搜索“Android”安装第一个搜索结果)

安装之后,勾选“Extras”下的“Google USB Driver package”,然后安装。

安装之后的操作;

  1. 开启当前Android设备的USB调试模式
  2. 开发机上安装Chrome浏览器(版本>=32)
  3. 用USB线连接Android设备,在PC或MAC上的Chrome地址栏输入chrome://inspect 然后回车,或通过菜单图标→工具→检查设备,进入调试界面
  4. 勾选界面中的 Discover USB devices ,直到搜索到你的Android设备
  5. 在移动设备上弹出的是否允许远程调试上,选择“允许”
  6. 在下面的页面列表(将展示已在Android上的Chrome中打开的页面),点击对应的 inspect 开始调试
  7. 此时将在桌面版Chrome上弹出一个新的标签页,即为调试界面;

连通后的效果是这样的~

这样以后,开发机的Chrome开发者工具就可以远程调试手机上的Chrome页面,但仅限于Chrome。接下来解决手机APP联网和流量抓包的问题。

第二点的实现,得借助一款叫做“Transparent Proxy”的软件实现(需root权限),配置全局代理后,所有APP的流量就都指向Chrome的8888端口了;

需要注意的是:开发机与手机之间网络连接需要靠大小Chrome通奸来维持,所以即使不是调试手机版Chrome网页,也要保持手机Chrome后台运行状态(即 保持上图中的小绿点常亮)

需要如图配置三个地方

第三点,到目前为止,手机上的流量已经全部转向台式机的Chrome,接下来要做的,是将台式机Chrome接收到的流量转到我们熟悉的抓包工具——Fiddler上

Chrome的配置

Fiddler的配置方法就不介绍了,不懂的百度一下,记得勾选“Allow remote computers to connect”哦。

财富宝APP的抓包,从User-Agent值可以看到系统和内核信息

目前我们用较多的是console.re 和blog.qqbrowser.cc的方案;

  • 方案一本质是模拟console,依赖第三方服务器且存在网络延迟问题,功能也远不及Chrome开发者工具强大;
  • 方案二需要安装鹅厂产品,不过相比带来的调试便利,这点推广还算良心。另外这个方案只能调试内核使用x5的APP,如微信、QQ空间等,且对APP版本有要求,如微信6.1以后才支持x5内核。

相比之下,咱们这套方法有三个优势:

  1. 不需要专门去安装个QQ浏览器用于调试(对于办公机内存吃紧如我的同学而言还是蛮赞的);
  2. 不仅限于X5内核,可调试所有安卓应用中的webview;
  3. 手机使用开发机网络,无需MA账号,妈妈再也不用担心你的手机流量~

最终实现的效果

手机上打开页面的列表,点击“inspect”开始调试

远程调试Chrome中打开的页面

远程调试APP webview中的页面

远程调试微信webview中的页面

不将就于console.re模拟调试、不局限于仅满足特定场景的调试方案,要就用最直接的开发工具,做有追求的开发者(追求高效、追求简单、追求纯粹、追求XX… )。

迂回妥协的方案如:设置全局开关 然后判断页面运行环境切换开关 虽然也是经验的结晶,但终究影响开发效率和体验。

面对外部条件和环境给开发带来的不便,我们还是要保持有开发者的初心,而不是以此为理由降低对开发过程和自己的要求,相信有光,于是光就在前方不远处。