细说移动前端Android联调

为什么要联调

A：正在疯狂coding的时候，产品MM过来，焦急的说两周前的一个页面在手机上显示略微错位，但小本上显示正常！

B：本着爱折腾的原则，作为大前端，在移动互联网时代的基本技能。

联调的方式：

1：ADB Chrome extension

2：Opera Mobile

3：weinre

4: Adobe Egde Inspect CC

方式一：ADB Chrome extension：具体参考：这里

步骤一：ADB extension

步骤二：安装手机驱动

步骤三：手机chrome 开发者工具->启动USB网页调试

步骤四：ADB->View Inspection Targets

细节：手机驱动如果不好找就装个91或者豌豆荚吧

优缺点：配置简单，可快速开始。但ADB会闹脾气，时快时慢

优化：解决慢可以尝试用android的sdk本地搞个服务器。

基本配置->下载ADT->CMD(adb forward tcp:8888 localadstract:chromedevtoolsremote)->localhost:8888

方式二：Opera Mobile

步骤一：下载Opera桌面版(低版本) 下载Opera 模拟器

步骤二：打开桌面版的Dragonfly 点击右上角的远程调试设置端口

步骤三：在模拟器中输入 opera:debug 设置端口连接。

细节：Opera桌面版高版本的调试器居然不是dragongly，下低版本(10.52)。

优缺点：简单方便，支持模拟各种机型的显示效果。但是不能选择元素方式不友好。

方式三：weinre(web in remote)

步骤一：安装Node.js. => 安装weinre(npm install -g weinre)

步骤二：启动服务器 weinre –httpPort 8080 –boundHost -all-

步骤三：在目标调试文件中加入：

 <script src="http://本机ip:8080/target/target-script-min.js#anonymous"></script>

步骤四：localhost:8080/client 即可调试

细节：引入的script标签中必须有#anonymous,否则看不到可调试文件。

优缺点：高端上流，操作简单，可用浏览器自带的调试器调试，适合爱好不同开发者。

缺点是，方便前端开发。

优化：每次都手动引入js很不爽，效率极低。做成书签形式，每次在当前页面引入js。

javascript:(function(e){
    e.setAttribute("src","http://192.168.1.5:8080/target/target-script-min.js#anonymous");
    document.getElementsByTagName("body")[0].appendChild(e);
    alert('has executed!');
})(document.createElement("script"));
void(0);

结语：

移动端调试虽好玩，但是太折腾，保证效率，只能作为最后法宝

遇到问题：Bug现象->本地调试->定位bug->确定是否联调